CODEWITHSUNDEEP
jqueryjquery-validate
srph
srph

Reputation: 1322

my jQuery Validation not working as it should

I just read jQuery Validation, and I've encountered issues. Clicking the submit button does not trigger any validation. I've been searching for hours, but, unfortunately, I found no solution.

My code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title> Test </title>

        <style>

                body {
                        max-width: 70em;
                        margin: auto;
                        padding: 0;
                }

                .container {
                        max-width: 50%;
                        margin: auto auto;
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        border-radius: 5px;
                }

                input, button {
                        display: block;
                        margin: 0.5em auto;
                        height: 2em;
                        width: 90%;
                }

                button {
                        border: 0;
                        background-color: green;
                }

                .text-center {
                        text-align: center;
                }
        </style>

</head>

<body>

        <div class="container">
                <form method="POST" id="form">
                        <h2 class="text-center"> Register! </h2>
                        <label> Username </label>
                        <input type="text" name="username">
                        <label> Password </label>
                        <input type="password" name="password">
                        <label> Password Confirmation </label>
                        <input type="password" name="password_confirmation">
                        <label> Email </label>
                        <input type="password" name="password_confirmation">
                        <input type="submit" value="Submit">
                </form>
        </div>

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

        <script>

        $(document).ready(function() {
                $("#form").validate({
                        rules: {
                                username: {
                                        required: true,
                                        range: [4, 15]
                                }

                                password: {
                                        required: true,
                                        minlength: 8
                                }

                                email: {
                                        required: true,
                                        email: true
                                }
                        }
                });
        });



        </script>
</body>
</html>

JSFiddle: http://jsfiddle.net/hPmec/

Upvotes: 0

Views: 191

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You have syntax errors in the script

$(document).ready(function () {
    $("#form").validate({
        rules: {
            username: {
                required: true,
                range: [4, 15]
            }, //missing ,

            password: {
                required: true,
                minlength: 8
            }, //missing ,

            email: {
                required: true,
                email: true
            }
        }
    });
});

Demo: Fiddle

Upvotes: 3

Related Questions