クリックイベントのJavaScript終了問題

Question

「閉鎖」問題に対する多くの回答を見てきましたが、私の特定の問題を解決することはできません。

次のjsコードはjsonファイルを取得して保存し、データに基づいてフォーム検証を行います。

問題はフォームの提出とvalidate関数の実行です。私は2つのエラーが表示されるはずですが、最後のフィールド（コンソールに記録されています）のエラーしか表示されません。

これは明らかな閉鎖の問題ですが、一日中それを費やしてもまだ解決できません。以下はコードです。クリックイベントは下部にあります。

私はこの時点で最小長ルールをチェックしています。おそらく関連するが、以下にロードされるJSONではありません

// Get the json file and store 
function loadJSON(callback) { 
    var xobj = new XMLHttpRequest(); 
    xobj.overrideMimeType("application/json"); 
    xobj.open('GET', 'js/rules.json'); 
    xobj.onreadystatechange = function() { 
    if (xobj.readyState == 4 && xobj.status == "200") { 
     // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode 
     callback(xobj.responseText); 
    } 
    }; 
    xobj.send(null); 
} 

// Load json... 
loadJSON(response); 

// Create global vars... 
var lookup = [], errors = [], i, e, id, lookupId, minLength; 

function response(responseData) { 
    // Create objects from json data 
    var rulesSet = JSON.parse(responseData); 

    // Loop through objects 
    for (i = 0; i < rulesSet.length; i++) { 
    // Create a lookup for each object that can be used later 
    lookup[rulesSet[i].id] = rulesSet[i]; 
    } 

    // Loop through form elements and store id's 

    // Validate the form 
    function validate(e) { 
    var elements = document.getElementsByTagName('input'); 
    for (e = 0; e < elements.length; e++) { 
     id = elements[e].getAttribute('id'); 
     lookupId = lookup[id].rules; var rules; 
     // Loop through rules of the matched ID's 
     for (rules of lookupId){ 
     // Check if there is a min length rule 
     if(rules.name === 'min_length') { 
      minLength = rules.value.toString(); 
      // Check if the rule is valid (is a number) 
      if(isNaN(minLength) || minLength.length === 0){ 
      // Log an error somewhere here 
      // Run the minLength function and report an error if it fails validation 
      } else if(!checkMinLength(minLength, id)) { 
      errors[errors.length] = id + " - You must enter more than " + minLength + " characters"; 
      } 
     } 
     } 
     // If there are errors, report them 
     if (errors.length > 0) { 
     reportErrors(errors); 
     //e.preventDefault(); 
     } 
    } 
    } 
    validate(); 

    // Check the length of the field 
    function checkMinLength(minLength, id){ 
    var val = document.getElementById(id).value; 
    if(val < minLength){ 
     return false; 
    } 
    return true; 
    } 

    // Error reporting 
    function reportErrors(errors){ 
    for (var i=0; i<errors.length; i++) { 
     var msg = errors[i]; 
    } 
    console.log(msg); 
    } 

    $('#email-submit').on('click',function(e){ 
     validate(e); 
    }); 

} 

...

[ 
    { 
    "id": "search", 
    "rules": [ 
     { 
     "name": "min_length", 
     "value": "5" 
     }, 
     { 
     "name": "email" 
     } 
    ] 
    }, 
    { 
    "id": "phone-number", 
    "rules": [ 
     { 
     "name": "min_length", 
     "value": 8 
     } 
    ] 
    }, 
    { 
    "id": "surname", 
    "rules": [ 
     { 
     "name": "min_length", 
     "value": 10 
     } 
    ] 
    } 
] 

そして検証するための基本的な形...

<form action="index.html" name="searchForm" id="search-form"> 
      <label for="search">Email</label> 
    <input type="text" id="search" name="email" placeholder="Enter email"> 
    <input type="text" id="phone-number" name="name" placeholder="Enter name"> 
     <button type="submit" id="email-submit">Submit</button> 
    </form> 

Answer 1

をコードは正確に何をしますそれを指示する

// Error reporting 
function reportErrors(errors){ 
    for (var i=0; i<errors.length; i++) { 
    var msg = errors[i]; <-- setting the variable on each iteration 
    } 
    console.log(msg); <-- reads the last value from the last iteration 
} 

ヨuはループの

// Error reporting 
function reportErrors(errors){ 
    for (var i=0; i<errors.length; i++) { 
    var msg = errors[i]; 
    console.log(msg); 
    } 
} 

あるいはループ

// Error reporting 
function reportErrors(errors){ 
    console.log(errors.join("\n"));   
} 

そして今、ロジックの問題でないの内側にコンソールを移動する必要がある、あなたは、forループ

function response(responseData) { 
    // ignored code // 

    var elements = document.getElementsByTagName('input'); 
    for (e = 0; e < elements.length; e++) { 
    function validate(e) { <-- THIS SHOULD NOT BE IN THE FOR LOOP 

内の関数を宣言しています

もう一度エラーメッセージのように、最後のものだけがそこに存在します...

Answer 2

Creat閉鎖のないより読みやすいスキーム。

var submitButton = document.querySelector('#email-submit') 

function validate (evt) { 
    async function loadRules (url) { 
    var rawData = await fetch(url) 
    return await rawData.json() 
    } 

    function reportErrors (error) { 
    evt.preventDefault() 
    // Report logic here 
    } 

    function evaluate (rules) { 
    // Your validate rules here 
    // loaded rules in rules object 
    // eg. rules[0]['rules'].name 
    } 

    loadRules('js/rules.json').then(evaluate) 
} 

submitButton.addEventLister('click', validate)