表单验证-如何跟踪多个字段以防止提交-全局变量？

Question

我有一个包含多个字段的表单（对于本示例，请说4）。

我在每个字段上使用javascript函数进行验证，从而生成错误指示-红色框或该框旁边的提示。

像这样..

<input
    ...
    onkeyup="validateName()"
    onblur="checkDuplicateName(); validateName()"
>

因此，如果任何字段未通过验证，我想禁止提交。

所以问题是-设置它的最佳方法是什么，除非所有4个字段都有效，否则禁用提交？

我会用

document.getElementById("mySubmit").disabled=true;

要么

event.preventDefault()

（..尽管试图避免Jquery）阻止提交。

我应该如何跟踪这四个字段的状况？

我是否应该创建一个像-window.validFields这样的全局变量，以便可以从我的每个验证函数中访问它-为每个有效字段的变量添加一个变量，并在无效时减去一个变量？ （window.validFields == 4允许提交）

不确定实现此目的的最佳方法。

任何帮助，将不胜感激，谢谢。

Answer 1

假设这样的形式……

<form class="is-invalid" id="form" method="post">
  <input type="text" id="lorem">
  <input type="text" id="ipsum">
  <input type="text" id="dolor">
  <input type="text" id="amet">
  <button id="submit">Submit</button>
</form>

……您可以执行以下操作……

(function () {

  var fields = {
        lorem: false,
        ipsum: false,
        dolor: false,
        amet: false
      },
      isValid = false,
      form = document.getElementById('form'),
      i,
      tmpInput;

  // Binding submit-event to prevent form-submit
  form.addEventListener('submit', onSubmit, false);

  // Binding events on input-elements (keyup & blur)
  for ( i in fields ) {
    tmpInput = document.getElementById(i);
    tmpInput.addEventListener('keyup', checkInput, false);
    tmpInput.addEventListener('blur', checkInput, false);
  }

  // Checking form state by iterating over the fields object;
  // Adding/removing 'is-valid'-class and setting `isValid`-flag
  function checkFormState() {
    for ( var j in fields ) {
      if ( !fields[j] ) {
        isValid = false;
        form.className += /\bis-invalid\b/i.test(form.className)
          ? ''
          : 'is-invalid';
        return;
      }
    }
    form.className = form.className.replace(/\bis-invalid\b/i, '');
    isValid = true;
  }

  // Abort the submit, if the `isValid`-flag is `false`
  function onSubmit(evnt) {
    if ( !isValid ) {
      evnt.preventDefault();
      return false;
    }
  }

  // Setting the corresponding value in the `fields`-object;
  // Checking the form state
  function checkInput() {
    fields[this.id] = this.value.length > 5; // or any other validation rule
    checkFormState();
  }

})();

有一个具有相关输入字段ID的对象，其中包含每个验证状态。 在keyup和blur将检查每个输入字段。 如果通过验证，则将-object fields的相应值设置为true 。 另外，在输入元素上的每个事件上检查表单的状态。

checkState函数在fields -object上进行迭代。 如果找到的属性为false ，则在表单元素上设置“ is-invalid”类（如果尚未设置），则将isValid -flag设置为false并中止该函数。

否则-所有输入字段均有效-，将isValid -flag设置为true并从表单元素中删除“ is-invalid”类。 现在，可以提交表格了。

所有这些都不需要单个全局变量。 任务完成！

我做了一个小提琴 ，您可以在其中进行测试。

PS：请记住，只有版本9以下的IE才支持addEventListener -method。如果必须支持版本8和以下版本，则需要这样的解决方法 。

我希望这可以帮助你。

Answer 2

您可以使用表单提交事件，如下所示：

HTML ：

<form method="post" onsubmit="return MyValidation(); " ...

JS ：

(function() {
    var field1Valid = false;
    var field2Valid = false;

    window.validateField1 = function(elmnt) {
        // do some validation...

        if(everything == OK) {
            field1Valid = true;
            setButtonDisabled(false);
        }
        else {
            field1Valid = false;
            setButtonDisabled(true);
        }
    }

    window.validateField2 = function(elmnt) {
        // do some validation...

        if(everything == OK) {
            field2Valid = true;
            setButtonDisabled(false);
        }
        else {
            field2Valid = false;
            setButtonDisabled(true);
        }
    }

    window.checkDuplicateName = function() {
        // do some more validation...
    }

    window.setButtonDisabled = function(disabled) {
        document.getElementById('submit').disabled = disabled;
    }

    window.MyValidation = function() {
        return field1Valid  && field2Valid;
    }
}());

上面的示例还检查是否禁用提交按钮。

另一种方法是处理表单提交事件中的所有验证逻辑，但是立即验证输入总是更好。

如果您有兴趣，也可以使用许多与jQuery一起使用的验证插件。 如果您需要以多种方式验证多个字段，则自己构建此文件会很快变得混乱。