jQuery Validate 插件，当表单有效时启用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27049165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Validate plugin, enable submit button when form is valid
提问by Filth
I have an enabled and disabled state for the submit button on my form.
我的表单上的提交按钮有启用和禁用状态。
The conditions are as follows:
条件如下：
If all input fields have been entered and are validenable the submit button.
如果所有输入字段都已输入且有效，则启用提交按钮。
If somefields have not been entered do not enable the submit button.
如果某些字段尚未输入，请不要启用提交按钮。
So far the validation is being done within the onkeyup event and is only working for the first input:
到目前为止，验证是在 onkeyup 事件中完成的，并且仅适用于第一个输入：
//Custom onkeyup validation
onkeyup: function(element) {
//Check if input is empty remove valid class from parent
var formInput = $(element),
formInputParent = $(element).parent('fieldset');
if(formInputParent.hasClass('form--valid') && formInput.val() === "") {
formInputParent.removeClass('form--valid');
}
//Check if all fields are not empty to remove submit--disabled class
var formInputs = $('form').find(':input');
console.log(formInputs);
formInputs.each(function(){
if(formInputs.length > 0) {
formInputs.parents('form').find('.submit-form').removeClass('submit--disabled');
}
});
}
Check here for a DEMO
在此处查看演示
回答by Sparky
You would simply construct a blur(or even a keyup) handler function to toggle the button based on the form's validity. Use the plugin's .valid()method to test the form.
您只需构建一个blur（甚至是keyup）处理函数来根据表单的有效性来切换按钮。使用插件的.valid()方法来测试表单。
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
DEMO: http://jsfiddle.net/sd88wucL/
演示：http: //jsfiddle.net/sd88wucL/
Instead, you could also use bothevents to trigger the same handler function...
相反，您也可以使用这两个事件来触发相同的处理程序函数...
$('input').on('blur keyup', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
DEMO 2: http://jsfiddle.net/sd88wucL/1/
演示 2：http: //jsfiddle.net/sd88wucL/1/
回答by Foxbond
$('form').find(':input').each(function(index, value){
//action for every element
$(value);
});
In this case you can do this that way: (but I dont like this solution)
在这种情况下，你可以这样做：（但我不喜欢这个解决方案）
var areSomeFieldsEmpty = false;
$('form').find(':input').each(function(i, v){
if ($(v).val().length <= 0){
areSomeFieldsEmpty = true;
}
});
if (!areSomeFieldsEmpty){
//unlock form
}
回答by Anima-t3d
The code below is what I ended up with so far:
下面的代码是我到目前为止得到的结果：
$('#formId').on('blur keyup change', 'input', function(event) {
validateForm('#formId');
});
function validateForm(id) {
var valid = $(id).validate().checkForm();
if (valid) {
$('.form-save').prop('disabled', false);
$('.form-save').removeClass('isDisabled');
} else {
$('.form-save').prop('disabled', 'disabled');
$('.form-save').addClass('isDisabled');
}
}
// Run once, so subsequent input will be show error message upon validation
validateForm('#formId');
It uses checkForm()instead of the form()and my disable button has the classform-save
它使用checkForm()而不是form()和我的禁用按钮有类form-save
It is based on @Sparky's answer
它基于@Sparky 的回答
There is an issue filed on the jquery-validation git repo.
回答by Vijayashok
<html>
<form id="form">
name<br>
<input type="text"><br>
Roll Number<br>
<input type="number"><br>
<input id="next" type="submit" disabled="disabled">
</form>
</html>
Initially, I have set submit button disabled and for each change in the input tag I will call a function to validate the form using jquery
最初，我已将提交按钮设置为禁用，对于输入标签中的每次更改，我将调用一个函数来使用 jquery 验证表单
$("input[type='text'], input[type='number']").on("input", function () {
validate();
});
function validate(){
var show = true;
$("input[type='text'], input[type='number']").each(function(){
if($(this).val()==''){
show = false;
}
});
if(show){
$('#next').css({cursor:'pointer'})
$('#next').removeAttr('disabled')
}
else {
$('#next').css({cursor:'not-allowed'})
}
}
});
