我无法在Jquery Validation插件中验证表单

Question

我一直试图验证此表格：

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

但我无法使用Jquery Validation Plugin验证它我在我的文件中添加这些脚本代码：

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

任何人都可以告诉我为什么我要去test.html而不验证表格.... ??有没有语法错误??

Answer 1

工作代码..已检查:: ---

试试： -

要遵循的步骤： -

1. 您必须查看源代码并查看是否有任何脚本无法正常运行。
2. 尝试调试错误或警告。
3. 检查您是否传递了正确的身份证明。
4. 尝试检查您的插件
5. 尝试显示您的错误消息。

您的Html代码： -

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

你的js代码： -

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

}）; }）;

Answer 2

将<form..>移出<table> 像...

<form ...>
   <table>
   ...
   </table>
</form>

希望它有效