单击事件时Javascript关闭问题

我已经浏览了很多关于“关闭”问题的答案，但没有找到任何关于我的具体问题的答案

下面的js代码获取一个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);
  });

}

以及验证的基本形式

<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>

电子邮件
提交

代码完全按照您的指示执行

// 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
}

现在是一个逻辑问题，在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

功能响应（响应数据）{
//忽略代码//
var elements=document.getElementsByTagName（'input'）；
对于（e=0；e函数validate（e）{在没有闭包的情况下创建更可读的方案

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)

因为循环中没有控制台日志行…您好，谢谢您的帮助。不幸的是，这没有任何效果。而且查看您的代码没有任何意义…为什么
函数验证（e）{
在for循环中。该函数在每次迭代中都会替换上一个。您有逻辑问题，我没有时间坐下来解决。该函数不应该在循环中，您应该做其他事情。是的，这是我的一个错误，将该函数设置为循环。我已在我的原始版本中更新了该代码l问题。再次感谢您的帮助，但我认为这与错误报告无关。因为您现在遇到了与错误相同的问题。
id
设置在验证之外，因此您只测试for循环属于验证函数内部的最后一个
id
。验证（元素）{id=…；使用id的代码}
// Error reporting
function reportErrors(errors){
  console.log(errors.join("\n"));        
}

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

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)