Question

我有一个包含多个字段的表单（本例中假设为4）。

我在每个字段上使用javascript函数来验证它们，生成错误指示 - 红色框或提示框旁边的文本。

喜欢这样..

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

因此，如果任何字段未验证，我想做的是不允许提交。

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

我会使用

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

或

event.preventDefault()

（尽管试图避免使用Jquery）以阻止提交。

我应该如何跟踪4个领域的情况？

我应该创建一个像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上检查每个输入字段。如果它通过验证，则fields - 对象中的相应值将设置为true。另外，在输入元素上的每个事件上检查表单的状态。

checkState - 函数遍历fields - 对象。如果它找到一个属性，即false，则在表单元素上设置'is-invalid'类（如果尚未设置），isValid - 标志设置为false并且函数已中止。

否则 - 所有输入字段都有效 - isValid - 标志设置为true，并且从表单元素中删除'is-invalid'类。现在，可以提交表格。

这一切都没有一个全局变量。任务完成了！

我做了一个Fiddle，你可以在那里测试一下。

PS：请注意，只有IE版本支持addEventListener - 方法。如果您必须支持版本8及更低版本，则需要workaround like this。

我希望这会对你有所帮助。

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的验证插件。如果您有多个需要以多种方式验证的字段，那么自己构建它可能会很快变得混乱......

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

2 个答案: