CODEWITHSUNDEEP
jqueryjquery-validate
user1851487
user1851487

Reputation: 547

jQuery validate, validation not working

I have got a simple signup form that uses jQuery validate to validate the contents of the form. but it doesnt seem to be working. My servlet fires and the form is submitted with invalid data regardless of the jQuery at the top of my page. Below is my code. Can anyone please help?

Script code:

<head>
    <title>Sign Up</title>
    <meta charset="iso-8859-1">
    <link rel="stylesheet" href="style/style.css" type="text/css">
    <!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript">
    </script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        $().ready(function() {
            // validate the comment form when it is submitted
            $("#signup").validate();

            // validate signup form on keyup and submit
            $("#signup").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    address1: "required",
                    city: "required",
                    county: "required",
                    postcode: "required",

                    password_s: {
                        required: true,
                        minlength: 5
                    },
                    password_s_con: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password_s"
                    },
                    email: {
                        required: true,
                        email: true
                    },

                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your first name",
                    lastname: "Please enter your last name",
                    address1: "Please enter your addres",
                    city: "Please enter your city/town",
                    county: "Please enter your county",
                    postcode: "Please enter your postcode",

                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    confirm_password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                }
            });

        });
    </script>
</head>

The Form:

<table align="left">
<tr><td align="left">
        <form name="signup" id="signup" action="SignUpServlet" method="post">
            <table width="400px" align="right" class="">
                <fieldset>
                    <legend>Sign Up:</legend>
                    <tr>
                        <td>First Name:</td> <td><input type="text" id="firstname" name="firstname" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Last Name:</td><td><input type="text" id="lastname" name="lastname" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Address Line 1:</td><td> <input type="text" id="address1" name="address1" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Address Line 2:</td><td> <input type="text" id="address2" name="address2"></td>
                    </tr>
                    <tr>
                        <td>City:</td><td> <input type="text" id="city" name="city" required="required">*</td>
                    </tr>
                    <tr>
                        <td>County:</td><td><input type="text" id="county" name="county" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Postcode:</td> <td><input type="text" id="postcode" name="postcode" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Phone:</td><td> <input type="text" id="phone" name="phone"></td>
                    </tr>
                    <tr>
                        <td>Email Address:</td><td> <input type="text" id="email_s" name="email_s" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Password:</td><td> <input type="password" id="password_s" name="password_s" required="required"></td>
                    </tr>
                    <tr>
                        <td>Confirm Password:</td><td> <input type="password" id="password_s_con" name="password_s_con" required="required"></td>
                    </tr>
                    <tr>
                        <td>Privacy Policy:</td><td> <input type="checkbox" class="checkbox" id="agree" name="agree" required="required"></td>
                    </tr>
                    <tr>
                        <td></td><td>
                            <input type="submit" id="lf_submit" value="submit"></td>
                    </tr>
                </fieldset>
            </table>
        </form>
    </td></tr>
<tr><td align="left"> </td></tr>
</table>

Upvotes: 3

Views: 70442

Answers (1)

Sparky
Sparky

Reputation: 98718

Firstly, you do not need to call .validate() twice. It's redundant and superfluous, so remove the first one, and naturally keep the one that contains the options.

$().ready(function() {
        // validate the comment form when it is submitted
        $("#signup").validate(); // <-- REMOVE THIS

        // validate signup form on keyup and submit
        $("#signup").validate({

.validate() is called once within DOM Ready to initialize the form. All of the validation events such as submit, keyup, etc. are automatic unless you over-ride them in the plugin options.

Secondly, you are incorrectly including jQuery after the plugin.

No matter which jQuery plugins you use, jQuery ALWAYS needs to be included FIRST...

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>

Working Demo of Your Code: http://jsfiddle.net/qUYvS/

Documentation: http://jqueryvalidation.org/

Upvotes: 13

Related Questions