jQuery验证插件-只要表单有效
关于jQuery验证的问题。当我的表单加载时，我有50%不透明度的提交按钮，让用户知道它已被禁用 一旦表单满足所有规则，onkeyup，我如何检测并允许我将提交按钮的不透明度返回到100% “success:function（label）{”已经很晚了，因为要求用户转到下一个字段，而这在我的应用程序中并不适用 想法？我用另一种方式来表达。 您在服务器上有表单验证，是吗？为什么要在客户端和服务器上两次验证表单数据 我的解决方案是使用ajax将表单发送到服务器，在服务器上进行验证，如果没有错误，则保存数据（或其他…）。 若服务器验证器发现一些错误，则返回表单（在json…）并在客户端显示错误 帮帮忙？jQuery验证插件-只要表单有效,jquery,jquery-plugins,jquery-validate,Jquery,Jquery Plugins,Jquery Validate,关于jQuery验证的问题。当我的表单加载时，我有50%不透明度的提交按钮，让用户知道它已被禁用 一旦表单满足所有规则，onkeyup，我如何检测并允许我将提交按钮的不透明度返回到100% “success:function（label）{”已经很晚了，因为要求用户转到下一个字段，而这在我的应用程序中并不适用 想法？我用另一种方式来表达。 您在服务器上有表单验证，是吗？为什么要在客户端和服务器上两次验证表单数据 我的解决方案是使用ajax将表单发送到服务器，在服务器上进行验证，如果没有错误，则保
Martin您可以使用轻松劫持验证机制回调。下面是一个示例（也可以使用）：
$（函数（）{
变量按钮=$（“#submit1”）；
功能按钮句柄（验证器）{
var errors=validator.numberOfInvalids（）；
如果（错误===0）{
按钮。removeAttr（“禁用”）；
}否则{
button.attr（'disabled'，'disabled'）；
}
}
$（'#form1'）。验证({
规则：{
text1:{required:true}
},
errorPlacement:函数（错误，元素）{
错误。插入符（元素）；
按钮手柄（此）；
},
突出显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（错误类）；
$（元素）.removeClass（有效类）；
按钮手柄（此）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（有效类）；
$（元素）.removeClass（错误类）；
按钮手柄（此）；
}
}).form（）；//触发器验证
});
这里的关键是在任何用户输入（使用该方法）之前触发验证，因此jquery.validate开始侦听输入事件，并在键（和其他）事件触发时开始触发回调。这是一种糟糕的用户体验。当您遇到一些难以验证的问题时（是数据库中的电子邮件，…），唯一的方法是将数据发送到服务器并在那里进行验证。为什么体验不好？谢谢，但代码太多了。我不知道添加了什么和没有添加什么？高亮显示和高亮显示是验证的一部分吗？errorPlacement、highlight和unhighlight是验证方法的选项，在验证程序显示/隐藏/显示错误消息时调用验证后。该示例注入了一个自定义处理程序（buttonHandler），该处理程序根据验证程序的状态处理submit按钮的disabled属性。我更新了答案，您只需将代码复制粘贴到一个空白html文件中，然后自己试用。我还将其放在jsbin上，您可以在线试用
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<script>
$(function() {
var button = $('#submit1');
function buttonHandler(validator) {
var errors = validator.numberOfInvalids();
if(errors === 0) {
button.removeAttr('disabled');
} else {
button.attr('disabled', 'disabled');
}
}
$('#form1').validate({
rules: {
text1: { required: true }
},
errorPlacement: function (error, element) {
error.insertAfter(element);
buttonHandler(this);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass);
$(element).removeClass(validClass);
buttonHandler(this);
},
unhighlight: function (element, errorClass, validClass) {
$(element).addClass(validClass);
$(element).removeClass(errorClass);
buttonHandler(this);
}
}).form(); // trigger validation
});
</script>
<form id="form1" action="#">
<input id="text1" name="text1" type="text" /><br/>
<input id="submit1" name="submit1" type="submit" value="Test" disabled="disabled" />
</form>
</body>
</html>