新しい要素を追加しない.each（）ループ内のJavaScript配列

Question

HTML5の 'pattern'属性と対応するJSを使用して、いくつかのフォーム検証をテストしています。完全な開示、それは何か違いがあれば私はIE 11を使用して固執しています。

これまでのところ、スクリプトをループしてHTML入力からパターンを取得し、.test（）メソッドのRegExpに変換することができました。検証部分が機能しているようです。

私は例えば、配列にフォームの入力を保存したいと思います：FORMDATA [fieldData、fieldData、fieldData]

...と別の配列、例えばに彼らの検証状態を記憶：validationStates [真、.every（）validationStateたらSUBMITボタンを有効に続い

]真、偽...とは（まだいないコードで）真です。

私の問題は、私の配列は1要素だけです - 新しい値は.push（）されていません。コンソールは、ループの各パスで上書きされているかのように、各配列が.length 1であることを一貫して報告しています（見ているように、非破壊的な.splice（）も試みました）。私は間違って何をしていますか？

$("input").change(function() { 
 
    console.clear(); 
 
    $("[required]").each(function(index) {   // find all required form fields 
 
    var fieldData, regex;       // init variables 
 
    var formData = [];        // init array for form input data 
 
    var validationStates = [];      // init array for validation states 
 
    
 
    fieldData = $(this).val();      // get form values and store 
 
    regex = new RegExp($(this).attr("pattern")); // pull regex from pattern(s) 
 
    formData.splice(index, 0, fieldData);   // store the field inputs in an array 
 
    validationStates.push((regex.test(fieldData))); 
 
    
 
    console.log(formData); 
 
    console.log(index); 
 
    console.log(validationStates); 
 
    }); 
 
});

.form-control, .btn { 
 
    margin-top: 10px; 
 
} 
 

 
input:invalid, textarea:invalid { 
 
    border: 1px dotted #F33 !important; 
 
    color: #E33 !important; 
 
} 
 

 
input:valid, textarea:valid { 
 
    border: 1px dotted #2C8 !important; 
 
    color: #2C8; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="validated_form"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
     <input class="form-control" id="name" pattern="^[^\s][a-zA-Z\s-.]*$" placeholder="name" required="" title="only letters and &#39;-&#39;" type="text" /> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <input class="form-control" id="time" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]" placeholder="time (HH:mm)" required="" title="24H time in HH:mm or H:mm format" type="text" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <input class="form-control" id="pattern" pattern="^[^&lt;&gt;\s].{5,}$" placeholder="HTML5 pattern matching test (a-z only, more than 5 characters)" required="" title="must be more than 5 characters" type="text" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-offset-4 col-xs-4"> 
 
     <button class="btn btn-md btn-block btn-info disabled" disabled="true" id="sub" type="submit" value="SUBMIT">Submit Form</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

Answer 1

ループ内の代わりのVaRせ

解説編集を使用するように... 、より良いを（.change前に、配列を宣言）と.each（）ループ： 何をやっていることは..あなたは、新しい配列を宣言している各ループの各反復であるので、それだけで今までに一つの要素

編集含まれています を

change() { 
    let errors = false; 
    each() { 
     errors = !Regexp.isItValid(input) 
    } 
    if(!errors) 
     proceed() 
} 

擬似コードがありますが、私は

私が何を意味するかだ：さて、私は再読み込みすることを...それはあなたの検証状態を記憶するために配列を使用することは非常に無意味だ...単に何かなどを行います今のところメモリが安いのを知っていますが、何も理由がなくてもそれを無駄にしてはいけません。