我的表单上的提交按钮有启用和禁用状态.
条件如下：
如果已输入所有输入字段且有效,则启用提交按钮.
如果尚未输入某些字段,请不要启用提交按钮.
到目前为止,验证是在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');
}
});
}
点击这里查看DEMO
解决方法
您只需构造一个模糊(甚至是键盘)处理函数,以根据表单的有效性切换按钮.使用插件的.valid()方法来测试表单.
$('input').on('blur',function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled',false);
} else {
$('#submit').prop('disabled','disabled');
}
});
演示：http://jsfiddle.net/sd88wucL/
相反,您也可以使用这两个事件来触发相同的处理函数…
$('input').on('blur keyup','disabled');
}
});
