当前位置：文江博客话题详情

jQuery 验证插件 - 一旦表单有效

发布于 2024-09-30 00:41:40 字数 210 浏览 1 评论 0原文

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

一旦表单满足所有规则，onkeyup，我如何检测到这一点并允许我将提交按钮的不透明度返回到 100%。

“ success: function(label) {” 已经太晚了，因为要求用户转到下一个字段，这不是我的应用程序中的工作方式。

有想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

亚希 2024-10-07 00:41:40

您可以使用验证方法选项轻松劫持验证机制回调。这是一个示例（也将其放在 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 启动监听输入事件，并在按键（和其他）事件触发时开始触发回调。

You can easily hijack the validation mechanism callbacks using the validate method options. Here is an example (also put it on 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>

The key here is to trigger the validation before any user input (using the validator.form() method), so jquery.validate starts listening to the input events, and starts triggering the callbacks when the key (and other) events fire.

回复收藏 0 原文