Question

i have been trying to validate This Form:

<table>
<form action="test.html" method="post" id="contactform" name="contactform">
<tr>
    <td>
    <label for="fname">First Name :</label>
    </td>

    <td>
    <input name="fname" id="fname" type="text" /> 
    </td>
</tr>
<tr>
    <td>
    <label for="lname">Last Name :</label>
    </td>

    <td>
     <input name="lname" id="lname" type="text" /> 
    </td>
</tr>

<tr>
    <td>
     <label for="gender">Gender :</label>
    </td>

    <td>
     <input name="gender" id="genderm" type="radio" /> Male  <input name="gender" id="genderf" type="radio" /> Female
    </td>

</tr>

<tr>
    <td>
      <label for="email">Email :</label> 
    </td>

    <td>
     <input name="email" id="email" type="text" /> 
    </td>
</tr>

<tr>
    <td>
    <label for="address">Address :</label>
    </td>

    <td>
    <input name="addr" id="addr" type="text" /> 
    </td>
</tr>

<tr>
    <td>
    <label for="mob">Mobile Phone :</label>
    </td>

    <td>
    <input name="mob" id="mob" type="text" /> 
    </td>
</tr>

<tr>
    <td>
     <label for="dob">Date Of Birth (mm/dd/YYYY):</label>
    </td>

    <td>
    <input name="dob" id="dob" type="text" />     
    </td>
</tr>

<tr>
    <td>
     <label for="agreeT">By Checking This you agree to our Terms  :</label>
    </td>

    <td>
     <input name="agreeT" id="agreeT" type="checkbox" />

    </td>
</tr>

   <tr>
    <td>
     <input type="submit" value="Sumbit" />
    </td>

</tr> 

But i am unable to Validate it using Jquery Validation Plugin i am Adding these Scripts Code in my File:

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>

<script language="javascript">

$(document).ready(function(e) {


    var validator = $("#contactform").validate({ 

    rules : {
        fname: "required",
        lname: "required",
        email: {
            email: true,
            required: true
        },
        gender:" required",
        addr: "required",
        dob: {
            required: true,
            date: true
        },
        agreeT: "required"
    }

    }
    );



});


</script>

Can anyone tell me why i am going to the test.html without validating the form….?? Is there any Syntax error??

Answer 1

Working code.. checked::—

Just try:–

Steps to follow:-

1. You have to view source and see if any script is not coming fine.
2. try to debug your errors or warning.
3. checked you are passing correct id .
4. try to check your plugins
5. Try show your error messages.

Your Html code:-

<form action="test.html" method="post" id="contactform" name="contactform">
    <table>

<tr>
    <td>
    <label for="fname">First Name :</label>
    </td>

    <td>
    <input name="fname" id="fname" type="text" /> 
    </td>
</tr>
<tr>
    <td>
    <label for="lname">Last Name :</label>
    </td>

    <td>
     <input name="lname" id="lname" type="text" /> 
    </td>
</tr>

<tr>
    <td>
     <label for="gender">Gender :</label>
    </td>

    <td>
     <input name="gender" id="genderm" type="radio" /> Male  <input name="gender" id="genderf" type="radio" /> Female
    </td>

</tr>

<tr>
    <td>
      <label for="email">Email :</label> 
    </td>

    <td>
     <input name="email" id="email" type="text" /> 
    </td>
</tr>

<tr>
    <td>
    <label for="address">Address :</label>
    </td>

    <td>
    <input name="addr" id="addr" type="text" /> 
    </td>
</tr>

<tr>
    <td>
    <label for="mob">Mobile Phone :</label>
    </td>

    <td>
    <input name="mob" id="mob" type="text" /> 
    </td>
</tr>

<tr>
    <td>
     <label for="dob">Date Of Birth (mm/dd/YYYY):</label>
    </td>

    <td>
    <input name="dob" id="dob" type="text" />     
    </td>
</tr>

<tr>
    <td>
     <label for="agreeT">By Checking This you agree to our Terms  :</label>
    </td>

    <td>
     <input name="agreeT" id="agreeT" type="checkbox" />

    </td>
</tr>

   <tr>
    <td>
     <input type="submit" value="Sumbit" />
    </td>

</tr> </table>
    </form>

Your js code:-

<script type="text/javascript">

$().ready(function() {
    $("#contactform").validate({ 

    rules : {
        fname: "required",
        lname: "required",
        email: {
            email: true,
            required: true
        },
        gender:" required",
        addr: "required",
        dob: {
            required: true,
            date: true
        },
        agreeT: "required"
    },
messages: {
    fname: "Please enter your name",
    lname: "Please enter your last name",
    email: "Please enter a valid email address"
}
    });

});


</script>

————OR——————-

 <script language="javascript">
$(document).ready(function() {
    $("#contactform").validate({ 

rules : {
    fname: {required: true},
    lname: {required: true},
    email: {
        email: true,
        required: true
    },
    gender:{required: true},
    addr: {required: true},
    dob: {
        required: true,
        date: true
    },
    agreeT:{required: true}
},
messages: {
    fname: "Please enter your name",
    lname: "Please enter your last name",
    email: "Please enter a valid email address"
}

});
});