Question

关于jQuery验证的问题。当我的表单加载时，我有50％不透明度的提交按钮让用户知道它已被禁用。

只要表单符合所有规则，onkeyup，我如何检测并允许我将提交按钮的不透明度返回到100％。

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

想法？

Answer 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开始侦听输入事件，并在键（和其他）事件时开始触发回调火。

Answer 2

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

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

帮忙吗？马丁

jQuery Validation Plugin - 只要表单有效

2 个答案: