jquery validation using class attribute

Question

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.

APUnit ? APUnit1 ? APunit1 ? Are you not messing with these terms? — MrUpsidown
– MrUpsidown, Commented Jan 28, 2015 at 15:49
You forgot to initialize the plugin with the .validate() method. Please also be more careful when tagging. jQuery Validation Engine is not jQuery Validate plugin. — Sparky
– Sparky, Commented Jan 28, 2015 at 19:35

Sparky · Accepted Answer · 2015-01-28 19:48:38Z

3

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/

edited Jan 28, 2015 at 19:48

answered Jan 28, 2015 at 19:38

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery validation using class attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related