[英]How do I use jQuery to disable a form's submit button until every required field has been filled?
I have a form with multiple inputs, select boxes, and a textarea. 我有一个具有多个输入,一个选择框和一个文本区域的表单。 I would like to have the submit button be disabled until all of the fields that I designate as required are filled with a value.
我想禁用“提交”按钮,直到我根据需要指定的所有字段都填充了一个值。 And after they are all filled, should a field that WAS field get erased by the user, I would like the submit button to turn back to disabled again.
在将其全部填满后,如果WAS字段被用户删除,我希望“提交”按钮再次变回禁用状态。
How can I accomplish this with jQuery? 如何使用jQuery完成此操作?
Guess my first instinct would be to run a function whenever the user starts modifying any of the inputs. 猜猜我的第一个直觉是每当用户开始修改任何输入时都运行一个函数。 Something like this:
像这样:
$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
inspectAllInputFields();
});
We then would have a function that checks every input and if they're validated then enable the submit button... 然后,我们将具有一个检查每个输入的功能,如果它们经过验证,则启用提交按钮...
function inspectAllInputFields(){
var count = 0;
$('.requiredInput').each(function(i){
if( $(this).val() === '') {
//show a warning?
count++;
}
if(count == 0){
$('#submitBtn').prop('disabled', false);
}else {
$('#submitBtn').prop('disabled', true);
}
});
}
You may also want to add a call to the inspect function on page-load that way if the input values are stored or your other code is populating the data it will still work correctly. 如果存储了输入值或您的其他代码正在填充数据,您可能还希望在页面加载时以这种方式添加对inspect函数的调用。
inspectAllInputFields();
Hope this helps, ~Matt 希望能有所帮助,〜马特
Here's something comprehensive, just because: 这里有些全面,仅仅是因为:
$(document).ready(function() {
$form = $('#formid'); // cache
$form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
$form.find(':input').change(function() { // monitor all inputs for changes
var disable = false;
$form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
if ($.trim(el.value) === '') {
disable = true; // disable submit if any of them are still blank
}
});
$form.find(':input[type="submit"]').prop('disabled', disable);
});
});
http://jsfiddle.net/mblase75/xtPhk/1/ http://jsfiddle.net/mblase75/xtPhk/1/
Set the disabled attribute on the submit button. 在提交按钮上设置禁用的属性。 Like:
喜欢:
$('input:submit').attr('disabled', 'disabled');
And use the .change() event on your form fields. 并在表单字段上使用.change()事件。
Start with the button disabled (obviously). 从禁用按钮开始(显然)。 Bind an
onkeyup
event to each required text input, and an onchange
or onclick
to the select boxes (and any radio buttons/checkboxes), and when it fires, check whether all required inputs are filled. 将
onkeyup
事件绑定到每个必需的文本输入,并将onchange
或onclick
绑定到选择框(以及所有单选按钮/复选框),并在触发时检查是否填充了所有必需的输入。 If so, enable the button. 如果是这样,请启用该按钮。 If not, disable it.
如果没有,请禁用它。
There is one loophole here, though. 不过,这里有一个漏洞。 Users can delete the value of a text field without triggering the
onkeyup
event by using the mouse to "cut" the text out, or by holding down the delete/backspace key once they have deleted it all, and clicking the button before deleting it. 用户可以通过以下方式删除文本字段的值,而无需触发
onkeyup
事件:使用鼠标将文本“切出”,或者在删除所有文本后按住Delete / Backspace键,然后在删除之前单击按钮。
You can get around the second by either 您可以通过
onkeydown
and checking if it is ok on onkeyup
onkeydown
禁用按钮,并检查onkeyup
是否正常 An idea from me: 我的想法:
I recommend taking a slightly different approach and using jquery's validation http://docs.jquery.com/Plugins/validation . 我建议采取略有不同的方法,并使用jquery的验证http://docs.jquery.com/Plugins/validation 。 The tactic you are suggesting is prone to security holes.
您建议的策略容易出现安全漏洞。 The user could easily using firebug enable that button and then submit the form.
用户可以轻松地使用Firebug启用该按钮,然后提交表单。
Using jquery validation is clean and it allows you to show error messages under the required fields if so desired on submit. 使用jquery验证是干净的,并且如果需要的话,它允许您在必填字段下显示错误消息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.