CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Sandeep Reddy K.
Sandeep Reddy K.

Reputation: 1011

jquery validation using class attribute

I have multiple text fields in my form which should contain only 5 alphabets and required fields. I am using jQuery Validation for this using class attribute.

Sample code:

<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>

But I am not getting any error message when I gave invalid input. Validation is working. I couldn't find the bug in it. Please help me to get through this.

Upvotes: 0

Views: 3034

Answers (1)

Sparky
Sparky

Reputation: 98738

No matter how you create and/or declare your rules, you still must attach the .validate() method to your form in order to initialize the plugin.

$(function() {

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

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

You also misspelled APunit1 here...

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

It's spelled as APunit1 here...

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

Initialize the plugin and fix the spelling error:

Working DEMO: http://jsfiddle.net/pcgb4moj/

Upvotes: 3

Related Questions