使用JQuery验证器扩展时禁用错误消息

时间:2011-06-03 06:23:27

标签: javascript jquery html

我一直在寻找一种方法来禁用无效表单元素旁边显示的错误消息,我只找到了自定义消息的方法,而不是完全阻止它们。

我试过了:

jQuery.extend(jQuery.validator.messages, {
    required: ""
}

但是这仍然会在我的文本框旁边放置一个空白区域并抛弃定位。任何人都知道我可以这样做的方式吗?

3 个答案:

答案 0 :(得分:4)

$('#submit').click(function(){
    $("#contactform").validate({
        errorPlacement: function(error, element) { },
        debug:true
    })
});

errorPlacement行留空是有效的。

答案 1 :(得分:2)

您可以使用CSS隐藏它们

label.error { display:none; }

这不是一个完美的解决方案,但它会起作用

答案 2 :(得分:2)

我创建了对现有“必需”验证器的重写,以便不返回任何错误消息。

过度骑行所需方法:

// Creates the NEW validator method
jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');

// Creates a new CSS Rule for the validator method
// so we can add it like "class='requriedNoMsg'".
jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });

完整示例:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Demo</title>
    <!-- jQuery 1.6.1 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
    <!-- jQuery Validate 1.8.1 -->
    <script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/additional-methods.min.js" charset="utf-8"></script>

    <style type="text/css">
        body { margin: 0; padding: 0; font-family: Verdana, Tahoma, Arial, sans-serif; }
        fieldset.main { margin: 1em; padding: 1em; width: 400px; font-size: .9em; }
        fieldset.main ol { padding: 1em 1em 0 1em; list-style: none; }
        fieldset.main li { padding-bottom: .5em; }
        fieldset.main ol li label { display: block; width: 12em; margin-right: 1em; }
        input[type=button] { width: 6em; height: 2.5em; }
        input[type=checkbox] { }
        input[type=text].error { border: 1px dotted red; background-color: yellow;}
    </style>
    <script type="text/javascript">
        jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');
        jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });

        $(document).ready(function () {
            $('#myform').validate(
                {submitHandler: function () { alert('Validation Passed!'); }}
            );
        }); 
        </script>
</head>
<body>
    <form id="myform" method="get" action="">
    <fieldset class="main">
        <ol>
            <li>
                <label for="CustomerCode" class="left">
                    Customer Code</label>
                <input type="text" id="CustomerCode" name="CustomerCode" class="requiredNoMsg" />
            </li>
            <li>
                <label for="DeliveryCode" class="left">
                    Delivery Code</label>
                <input type="text" id="DeliveryCode" name="DeliveryCode" class="requiredNoMsg" />
            </li>
            <li>
                <input type="submit" id="Add" value="Add" />
            </li>
        </ol>
    </fieldset>
    </form>
</body>
</html>