jQuery Validation Plugin - 只要表单有效答案

【问题标题】：jQuery Validation Plugin - As soon as the form is validjQuery Validation Plugin - 只要表单有效
【发布时间】：2025-11-30 23:20:04
【问题描述】：

关于 jQuery Validate 的问题。当我的表单加载时，我将提交按钮设置为 50% 的不透明度，让用户知道它已被禁用。

一旦表单符合所有规则，onkeyup，我如何检测到并允许我将提交按钮的不透明度恢复为 100%。

“成功：函数（标签）{”为时已晚，因为要求用户移动到下一个字段，这不是它在我的应用中的工作方式。

想法？

【问题讨论】：

标签： jquery jquery-plugins jquery-validate

【解决方案1】：

您可以使用validate method options 轻松劫持验证机制回调。这是一个例子（也放在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>

这里的关键是在任何用户输入之前触发验证（使用validator.form() 方法），因此 jquery.validate 开始监听输入事件，并在键（和其他）事件触发时开始触发回调。

【讨论】：

谢谢，但是代码很多。我不知道添加了什么，没有添加什么？
highlight 和 highlight 是 validate 的一部分吗？
errorPlacement、highlight 和 unhighlight 是 validate 方法的选项，当验证器在验证后显示/隐藏/显示错误消息时调用。该示例注入了一个自定义处理程序（buttonHandler），它根据验证器的状态处理提交按钮的禁用属性。
我更新了答案，你可以把代码复制粘贴到一个空白的html文件中，然后自己尝试一下。
我也是放在jsbin上的，大家可以网上试试

【解决方案2】：

我以其他方式制作这个。您在服务器上有表单验证，确定吗？为什么要验证表单数据两次？在客户端和服务器上。

我的解决方案是将带有 ajax 的表单发送到服务器，在那里验证，如果没有错误 - 保存数据（或其他东西......）。如果服务器验证器发现一些错误，则返回表单（在 json...上）并在客户端显示错误。

帮忙？马丁

【讨论】：

这是一个糟糕的用户体验。
当您可以进行一些困难的验证（数据库中的电子邮件，...）时，唯一的方法是将数据发送到服务器并在那里验证。为什么体验不好？