我的表单上的提交按钮有启用和禁用状态.
条件如下：
如果已输入所有输入字段且有效,则启用提交按钮.
如果尚未输入某些字段,请不要启用提交按钮.
到目前为止,验证是在onkeyup事件中完成的,并且仅适用于第一个输入：
@H_301_10@//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()方法来测试表单.
@H_301_10@$('input').on('blur',function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled',false);
} else {
$('#submit').prop('disabled','disabled');
}
});
演示：http://jsfiddle.net/sd88wucL/
相反,您也可以使用这两个事件来触发相同的处理函数…
@H_301_10@$('input').on('blur keyup','disabled'); } });