CODEWITHSUNDEEP
jqueryvalidationjquery-validate
user601606
user601606

Reputation: 47

jQuery validate not validating form, but not throwing errors

I'm using jQuery Validate with jQuery Mobile for a mobile application. I've been trying to get this work for ages and cannot see what's wrong. Essentially the form submits without triggering any of the validation.

I've backtracked a good bit and copied the version of jquery and the validate.js from the sample page at http://jquery.bassistance.de/validate/demo/. Still doesn't work :(

    <script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function() { alert("submitted!"); }
    });

    $().ready(function() {
        // validate the comment form when it is submitted
        //$("#commentForm").validate();

        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                password2: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
            },
            messages: {
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                password2: {
                    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"
            }
        });
       </script>

The form is being initialised in PHP:

       echo "<form id=\"signupForm\" action='".$_SERVER['PHP_SELF']."' method=\"post\">";

Upvotes: 2

Views: 2876

Answers (3)

Mahak Choudhary
Mahak Choudhary

Reputation: 1384

You have added the "comma" in the rules-> email block ( in the last ) thats why your code is invalid.

email: { required: true, email: true },

should be

email: { required: true, email: true }

Upvotes: 0

Clyde Lobo
Clyde Lobo

Reputation: 9174

Well your js code seems to be invalid, Here's the valid code

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

 $().ready(function() {
     // validate the comment form when it is submitted
     //$("#commentForm").validate();

     // validate signup form on keyup and submit
     $("#signupForm").validate({
         rules: {
             username: {
                 required: true,
                 minlength: 2
             },
             password: {
                 required: true,
                 minlength: 5
             },
             password2: {
                 required: true,
                 minlength: 5,
                 equalTo: "#password"
             },
             email: {
                 required: true,
                 email: true
             }
         },
         messages: {
             username: {
                 required: "Please enter a username",
                 minlength: "Your username must consist of at least 2 characters"
             },
             password: {
                 required: "Please provide a password",
                 minlength: "Your password must be at least 5 characters long"
             },
             password2: {
                 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"
         }
     });});

Upvotes: 2

duncan
duncan

Reputation: 31912

One thing that might be causing a problem, in IE at least, is the trailing comma after the final 'email' element of your rules structure. The last element in a structure shouldn't have a comma after it.

Upvotes: 0

Related Questions