使用class属性进行jquery验证

时间:2015-01-28 15:21:44

标签: javascript jquery jquery-validate

我的表单中有多个文本字段,应该只包含5个字母和必需的文件。我正在使用类属性的jquery验证。

示例代码:

<html>
    <head>
        <title>Title</title>
    </head>
    <cfsavecontent variable="headerJS">
        <script type="text/javascript" src="js/validateCurrency.js"></script> 
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <script>
            $(function() {
                alert("function");

                jQuery.validator.addMethod("APUnit", function(value, element) {
                    return this.optional(element) || /^[A_Za-z]{5}$/i.test(value);
                }, " ");

                jQuery.validator.addMethod("cRequired", jQuery.validator.methods.required, "Customer name required");       
                jQuery.validator.addClassRules("APunit1",{APUnit: true, cRequired: true});          
            }); 
        </script>

        <style>
            label.error {
                color: red;
                font-style: italic;
                background: transparent url(images/unchecked.gif) no-repeat scroll 0 0;
                padding-left:20px;
                margin-left:10px;
            }
            input.error { border: 1px dotted red; }
            .border td {
                border-left: 1px solid black;
                border-right: 1px solid black;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
            }
            .border th{
                border-left: 1px solid black;
                border-right: 1px solid black;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
            }
        </style>
    </cfsavecontent>

    <cfhtmlhead text="#headerJS#">
    <body>
        <cfform name="eForm" method="POST">
            Name: <input type="text" name="name" class="APUnit1">
            <input type="submit" value="Submit">
        </cfform>
    </body>
</html>

但是当我提供无效输入时,我没有收到任何错误消息。 Vlidation正在运作。我找不到它里面的错误。请帮我解决这个问题。

1 个答案:

答案 0 :(得分:2)

无论您如何创建和/或声明规则,仍然必须将.validate()方法附加到表单中才能初始化插件。

$(function() {

    $('form[name="eForm"]').validate();

    jQuery.validator.addMethod("APUnit", function(value, element) { ....
    ....

你这里也错过了APunit1 ......

<input type="text" name="name" class="APUnit1">

这里拼写为APunit1 ......

jQuery.validator.addClassRules("APunit1" ....

初始化插件并修复拼写错误:

工作演示:http://jsfiddle.net/pcgb4moj/