javascript - jquery.validate - 按钮禁用，直到有效的电子邮件

Question

我正在使用https://jqueryvalidation.org/在前端验证我的表单。基本的“如果字段为空 - 验证”工作正常。

但我希望在输入有效的电子邮件地址之前先禁用提交按钮。我希望该按钮在字段变为有效(按键时)后立即启用。

所以基本上我只需要在“btn-disabled”类有效后将其删除。

我正在努力使用 jQuery 添加此函数/方法。如果有人可以提供帮助，将不胜感激。

这是一个稍微简化的版本:http://codepen.io/dagford/pen/kXJpEZ

$(document).ready(function(){

    $("#reset-form").validate({
        rules: {
            emailaddress: {
                required: true,
                email: true
            }

        },
        messages: {
            email: "Please enter a valid email address"
        }

    }); 

});

Answer 1

您可以在输入电子邮件地址后检查表单是否有效。默认情况下保持按钮禁用，并在验证表单后删除禁用属性。

 $("#emailaddress").on("blur", function(){
    if($("#reset-form").valid())
   {
       $("#btn-reset").removeAttr("disabled");
   }
 }); 

代码笔:http://codepen.io/anon/pen/YWLjKX?editors=1010