Question

I need to validate a register form using jQuery. And I tried using jQuery validate method but I am not getting output.

Can anybody help where I am wrong?

I am including what i have done:

    <script src="../../Scripts/jquery-1.9.0.min.js" type="text/javascript "> 
    </script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"> 
    </script>
    <script type="text/javascript">
                $(document).ready(function () {

                   $("#form1").validate({
                     rules: {
                    txtfirstname: "required", // simple rule, converted to {required:true} 
                    txtlastname: "required",
                    txtusername: "required",
                    txtpassword: "required",
                    txtemail: {// compound rule 
                        required: true,
                        email: true
                    },
                    txtaddress: "required",
                    txtstate: "required",
                    txtcity: "required",
                    txtzip: "required"
                },
                messages: {
                    txtzip: "Please enter a comment."
                }
              });
            });       

</script>
<form action="" method="post" id="form1">
   <div>
        <table>
            <tr>
                <td>
                    <label>
                        Firstname</label>
                </td>
                <td>
                    <input type="text" id="txtfirstname" name="txtfirstname" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Lastname</label>
                </td>
                <td>
                    <input type="text" id="txtlastname" name="txtlastname" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Username</label>
                </td>
                <td>
                    <input type="text" id="txtusername" name="txtusername" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Password</label>
                </td>
                <td>
                    <input type="text" id="txtpassword" name="txtpassword" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Email</label>
                </td>
                <td>
                    <input type="text" id="txtemail" name="txtemail" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Address</label>
                </td>
                <td>
                    <input type="text" id="txtaddress" name="txtaddress" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        State</label>
                </td>
                <td>
                    <input type="text" id="txtstate" name="txtstate" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        City</label>
                </td>
                <td>
                    <input type="text" id="txtcity" name="txtcity" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Zip</label>
                </td>
                <td>
                    <input type="text" id="txtzip" name="txtzip" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="btnclick" value="SUBMIT" />
                </td>
            </tr>
           </table>
      </div>
</form>
Was it helpful?

Solution

Your button isn't triggering the form submit when the button is clicked - so no validation is occuring

change

<input type="button" id="btnclick" value="SUBMIT" />

to

<input type="submit" id="btnclick" value="SUBMIT" />

FIDDLE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top