禁用提交按钮，直到所有表单输入都有数据

我正在尝试禁用提交按钮，直到所有输入都有一些数据。 现在按钮被禁用，但在填写完所有输入后它仍处于禁用状态。我做错了什么？

$(document).ready(function (){ validate(); $('input').on('keyup', validate); }); function validate(){ if ($('input').val().length > 0) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } 

Answer 1

这是对代码的修改，它检查所有字段，而不仅仅是第一个字段。

 $(document).ready(function() { validate(); $('input').on('keyup', validate); }); function validate() { var inputsWithValues = 0; // get all input fields except for type='submit' var myInputs = $("input:not([type='submit'])"); myInputs.each(function(e) { // if it has a value, increment the counter if ($(this).val()) { inputsWithValues += 1; } }); if (inputsWithValues == myInputs.length) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } 

Answer 2

香草JS解决方案。

有问题选择JavaScript标记。

HTML表格：

 
 
 User Name  
 
 Password  
 
 Retype Password  
 
 Email  
   

JavaScript的：

 var form = document.querySelector('form') var inputs = document.querySelectorAll('input') var required_inputs = document.querySelectorAll('input[required]') var register = document.querySelector('input[type="submit"]') form.addEventListener('keyup', function(e) { var disabled = false inputs.forEach(function(input, index) { if (input.value === '' || !input.value.replace(/\s/g, '').length) { disabled = true } }) if (disabled) { register.setAttribute('disabled', 'disabled') } else { register.removeAttribute('disabled') } }) 

一些解释：

在此代码中，我们在html表单上添加keyup事件 ，并在每个按键上检查所有输入字段。 如果我们至少有一个输入字段为空或只包含空格字符，那么我们将true值分配给disabled变量并禁用submit按钮。

如果您需要禁用提交按钮，直到填写所有必需的输入字段 – 替换：

 inputs.forEach(function(input, index) { 

有：

 required_inputs.forEach(function(input, index) { 

其中required_inputs已被声明为仅包含必需输入字段的数组。

JSFiddle演示： https ：//jsfiddle.net/ydo7L3m7/

Answer 3

您可以尝试使用jQuery Validate

http://jqueryvalidation.org/

然后执行以下操作：

 $('#YourFormName').validate({ rules: { InputName1: { required: true }, InputName2: { //etc.. required: true } } }); 

Answer 4

请参阅此处的示例。

在这种情况下，只考虑了type="text" input ，如您的问题中所述。

HTML：

 
 
 
  Name:   
 
 
  Age:   
 
 
  
 
  

JS：

 $(document).ready(function () { validate(); $('input').on('keyup check', validate); }); function validate() { var input = $('input'); var isValid = false; $.each(input, function (k, v) { if (v.type != "submit") { isValid = (k == 0) ? v.value ? true : false : isValid && v.value ? true : false; } if (isValid) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } }); } 

Answer 5

尝试修改你的function，如下所示：

 function validate(){ if ($('input').val() != '') { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } 

并在jquery中放置一些事件触发器或类似onkeyup的东西。对于普通的js，它看起来像这样：

不太确定这一点，但它可能有所帮助。

Answer 6

这是一个动态代码，在想要提交时检查所有输入以获取数据：

  $("form").submit(function(e) { var error = 0; $('input').removeClass('error'); $('.require').each(function(index) { if ($(this).val() == '' || $(this).val() == ' ') { $(this).addClass('error'); error++; } }); if (error > 0) { //Means if has error: e.preventDefault(); return false; } else { return true; } }); 

 .error { border: 1px solid red; } 

Answer 7

修改你的代码

Answer 8

 function disabledBtn(_className,_btnName) { var inputsWithValues = 0; var _f = document.getElementsByClassName(_className); for(var i=0; i < _f.length; i++) { if (_f[i].value) { inputsWithValues += 1; } } if (inputsWithValues == _f.length) { document.getElementsByName(_btnName)[0].disabled = false; } else { document.getElementsByName(_btnName)[0].disabled = true; } }