Form Validation Jquery in html

Question

I am new to JQuery and I want to use validation in html form

Here is my code but it is not working .I added jquery validate but it's not working. I am new to JQuery and I want to use validation in html form

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function ValidateForm(){
                var flag1 = 1;
                var flag2 = 1;
                var user_name = document.forms["form-login"]["Username"].value;
                var password = document.forms["form-login"]["Password"].value
                if (user_name == null || user_name == "") {
                    flag1 = 0;
                    return false;
                }
                if (password == null || password == "") {
                    flag2 = 0;
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <h3>Already A Member?</h3>
        <form name="form-login" id="form-login" action="check_login.php" onSubmit="return ValidateForm()" method="post">
            <div class="form-login">
                <label for ="Username">UserName</label>
                <br>
                <input type="text" class="form-login-control" id="Username" placeholder="Enter Username">
                <br><br>
            </div>
            <div class="form-login">
                <label for ="Password">Password</label>
                <br>
                <input type="password" class="form-login-control" id="Password" placeholder="Enter Password">
                <br><br>
            </div>
            <button type="submit">
                Submit
            </button>
        </form>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#form-login").validate({
                    rules: {
                        "Username": {
                            required: true,
                        },
                        "Password": {
                            required: true,
                            minlegth: 5
                        }
                    }
                });
            });
        </script>
    </body>
</html>

score 0 · Answer 1 · answered Jan 02 '14 at 04:35

0

You were surprisingly close. It looks like you've set up the validation more or less correctly. From there you shouldn't need any manual validation code like you have in the ValidateForm function. Instead, to see if the form is valid, you just do this:

if ($("#form-login").valid()){
    alert('valid');
} else {
    alert('not valid :(');
}

answered Jan 02 '14 at 04:35

Adam Rackis

82,527
56
270
393

1

Most typically, the OP wouldn't need to use `.valid()` either since that's automatically what the plugin is doing within its `submitHandler` and `invalidHander` callback functions. Usually, `.valid()` is used for programmatically testing the form in atypical situations, like using an anchor link in place of a `type="submit"` button or multi-stepped forms. – Sparky Jan 02 '14 at 05:24
@Sparky - interesting, thanks. Come to think of it, our app is an SPA, so I guess we're always using it atypically :) – Adam Rackis Jan 02 '14 at 05:26

score 0 · Accepted Answer · answered Jan 02 '14 at 04:35

You have no name attributes on your input's. These are needed in order to submit the form as only named elements get submitted, and are also the attributes that the rules properties match with validator plugin.

You also need to remove onSubmit="return ValidateForm()" from the markup and minlegth is misspelled

Form Validation Jquery in html

2 Answers2