jQuery Validate Plugin doesn't work

Question

I'm using jQuery and jQuery Validate Plugin on a test page, my code is based on validate demo

<html>
<head>

    <script src="http://jquery.bassistance.de/validate/lib/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="scripts/jquery.validate.js"></script>
    <script type="text/javascript">
        $.validator.setDefaults({
            submitHandler: function() { alert("submited!!!"); }
        });

        $().ready(function() {
            $("#registerForm").validate({
                rules : {
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlenght: 5
                    },
                    confirm_password: {
                        required: true,
                        minlenght: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages : {
                    username: {
                        required: "Please enter a username",
                        minlenght: "Your username must consist at least 2 characters"
                    },
                    password: {
                        required: "Please enter a password ",
                        minlenght: "Your password must consist at least 5 characters"
                    },
                    confirm_password: {
                        required: "Please repeat the password",
                        minlenght: "Your password must consist at least 5 characters",
                        equalTo: "This password doesn't match with the original password"
                    },
                    email: {
                        required: "Please enter a email",
                        email: "Invalid email"
                    }
                }
            });
        });    


    </script>
    <style type="text/css">
        #commentForm { width: 500px; }
        #commentForm label { width: 250px; }
        #commentForm label.error, #commentForm input.submit { margin-left: 253px; }
        #registerForm { width: 670px; }
        #registerForm label.error {
            margin-left: 10px;
            width: auto;
            display: inline;
            color: red;
        }
        #newsletter_topics label.error {
            display: none;
            margin-left: 103px;
        }
        </style>
</head>
<body class="zoom: 1;">
    <div id="main">
    <form id="registerForm" method="post" action="" novalidate="novalidate">
        <fieldset>
            <legend>OLA MUNDO</legend>
        <p><label for="username">Nome</label>
        <input id="username" name="username" type="text" value=""></p>

        <p><label for="email">E-mail</label>
        <input id="email" name="email" type="email" value=""></p>

        <p><label for="password">Password</label>
        <input id="password" name="password" type="password" value=""></p>

        <p><label for="confirm_password">Confirm Password</label>
        <input id="confirm_password" name="confirm_password" type="password" value=""></p>

        <p><input type="submit" class="submit" value="Enviar"></p>
    </fieldset>
    </form>
    </div>
</fieldset>
</body>

The problem is that in my page the code doesn't work and i don't know why it happens.

I have a jquery.js file in my scripts directory but the script isn't loaded. So i used the jquery from the demo site, i used the jquery hosted on google and that doesn't solves the problem. I don't know if the problem is on the script code, because i'm kind of newbie on javascript.

@Edit

I solved the problem but now the password and confirm password field doesn't validate, why? the js code is correct

Did you try to see the browser console if there are any script errors? — Hariprasad
– Hariprasad, Commented Dec 24, 2013 at 17:44
I see now, and it says **Uncaught SyntaxError: Unexpected identifier ** and i solved! — RebeloX
– RebeloX, Commented Dec 24, 2013 at 17:51
Thanks guys it is solved, Hariprasad and nzn solved the problem — RebeloX
– RebeloX, Commented Dec 24, 2013 at 17:58
unexpected identifier -because of you missed the comma operator — Manoj
– Manoj, Commented Dec 24, 2013 at 18:02

ravisuhag · Accepted Answer · 2013-12-24 17:48:39Z

2

you are writing your js before DOM is built up. Till then browser have not idea what register from is . So you have two option either put your javascript at bottom of page just above tag or use window.onLoad function. This will work ...

answered Dec 24, 2013 at 17:48

ravisuhag

1,7781 gold badge11 silver badges16 bronze badges

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

Comments

nzn · Accepted Answer · 2013-12-24 17:45:07Z

1

instead of $("registerForm") you should select by id $("#registerForm")

jquery selectors

answered Dec 24, 2013 at 17:45

nzn

8385 silver badges12 bronze badges

1 Comment

RebeloX Over a year ago

I didn't saw that thanks, with that and what Hariprasad said solved my problem.

Manoj · Accepted Answer · 2013-12-24 17:55:08Z

you missed mention the selector id $("#registerForm")and messages every method mention , operator

JS:

 $.validator.setDefaults({
            submitHandler: function() { alert("submited!!!"); }
        });

        $().ready(function() {
            $("#registerForm").validate({
                rules : {
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlenght: 5
                    },
                    confirm_password: {
                        required: true,
                        minlenght: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages : {
                    username: {
                        required: "Please enter a username",
                        minlenght: "Your username must consist at least 2 characters"
                    },   //missed comma
                    password: {
                        required: "Please enter a password ",
                        minlenght: "Your password must consist at least 5 characters"
                    },    //missed comma
                    confirm_password: {
                        required: "Please repeat the password",
                        minlenght: "Your password must consist at least 5 characters",
                        equalTo: "This password doesn't match with the original password"
                    },   //missed comma
                    email: {
                        required: "Please enter a email",
                        email: "Invalid email"
                    }
                }
            });
        });

Collectives™ on Stack Overflow

jQuery Validate Plugin doesn't work

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related