如何禁用提交按钮，直到所有字段都通过验证？ [英] Javascript: How to disable submit button until all fields are validated?

问题描述

我有几个可以很好地工作的验证函数，我想用简单的Java脚本(no jQuery等)为整个表单编写一个额外的验证，根据其他验证函数返回的是真还是假来禁用/启用提交按钮。我该怎么做？

例如，对于我的主HTML，我有：

 <form id="form" method="POST">
      <label class="form">Field 1</label><input type="text" name="input1" onkeyup="validateInput1(); return false">
      <label class="form">Field 2</label><input type="text" name="input2" onkeyup="validateInput2(); return false">
      ...
      <button id="submit" type="submit" value="submit">Submit</button>
 </form>

对于我的脚本，我有：

 function validateInput1(){
 ...
 }

 function validateInput2(){
 ...
 }

现在我想编写一个如下所示的函数：

function validateForm(){

    var submitButton = document.getElementById('submit');
    submitButton.disabled = true;

    /*If all other validation functions like validateInput1() returns true then submitButton.disabled = false*/
}

如何执行此操作？

推荐答案

以禁用状态启动该按钮。挂钩到每个表单输入的onchange事件，然后让它检查validateForm()函数以查看是否所有表单都有效。之后，如果它们都有效，则将"提交"按钮设置为"启用"，否则将其设置为"禁用"。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var inputs = document.querySelectorAll('#form input');

var validateInput1 = function()
{
  return document.getElementById('input1').value != '';
}

var validateInput2 = function()
{
  return document.getElementById('input2').value != '';
}
    
var validateForm = function() {

  if ( !validateInput1() ) {
    return false;
  }

  if ( !validateInput2() ) {
    return false;
  }

  return true;
}

for ( var i = 0, len = inputs.length; i < len; i++ )
{
  var checkValid = function() {
    document.getElementById('submit').disabled = !validateForm();
    
    //Is the same as:
    /*if ( !validateForm() )
    {
      document.getElementById('submitButton').disabled = true;
    }
    else
    {
      document.getElementById('submitButton').disabled = false;
    }*/
  }
  
  inputs[i].addEventListener('change', checkValid);
  inputs[i].addEventListener('keyup', checkValid);
}

<form id="form" method="POST" onsubmit="alert('Submitted!'); return false">
    <label class="form">Field 1</label><input type="text" name="input1" id="input1">
    <label class="form">Field 2</label><input type="text" name="input2" id="input2">
    <button id="submit" type="submit" value="submit" disabled="disabled">Submit</button>
</form>

这篇关于如何禁用提交按钮，直到所有字段都通过验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！