jquery 验证插件不适用于所有字段

Question

我有这段代码，当我尝试点击提交时，它不会验证任何字段... 我不知道如何解决这个问题..请帮助解决这个问题..提前谢谢..表格中的所有字段都是必需的。我只能通过使用 jquery 验证插件来验证....

<div>
    <form name="signUp" id="registerationForm">
         <h3> Sign Up For Free </h3>
        <label class="c1" for="usrEmail">User Email</label>
        <input type="text" name="usrEmail">
        <label class="c1" for="usrName">User Name</label>
        <input type="text" name="usrName">
        <label class="c1" for="pwd">Password</label>
        <input type="password" name="pwd">
        <label class="c2">I AM A</label>
        <label class="c2">
            <input type="radio" value="DESIGNER" name="position">DESIGNER</label>
        <label class="c2">
            <input type="radio" name="position" value="DEVELOPER">DEVELOPER</label>
        <label class="c2">
            <input type="radio" name="position" value="NEITHER, I JUST HAVE IDEAS">NEITHER, I JUST HAVE IDEAS</label>
        <label class="c2">
            <input type="checkbox" name="terms" value="agreements">I Have Read and Agree to the <span style="color:#097CA2"> Terms of Service </span> 
        </label>
        <input type="submit" id="submit" name="sign_up" value="SIGN UP NOW">
    </form>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $('#registerationForm').validate({
        rules: {
            usrEmail: {
                required: "true",
                email: "true"
            },
            usrName: "required",
            pwd: {
                pwd: "required",
                minlength: 5,
                maxlength: 18
            },
            terms: "required",
            position: "required",
        },
        messages: {
            usrEmail: "Please enter a valid email address",
            usrName: "Your Name is needed. Please enter it",
            pwd: {
                required: "please provide a password",
                minlength: "password must be minimum of 5 characters"
            },
            position: "Please select any position",
            terms: "please accept our policy"
        }
    });
});
</script>

Answer 1

您的 Javascript 存在一些问题。

1. 所有true 属性都必须不带引号。
2. pwd 中的第一个属性应该是 required: true 而不是 pwd: "required"。

这里是更正的代码：

<div>
    <form name="signUp" id="registerationForm">
         <h3> Sign Up For Free </h3>
        <label class="c1" for="usrEmail">User Email</label>
        <input type="text" name="usrEmail">
        <label class="c1" for="usrName">User Name</label>
        <input type="text" name="usrName">
        <label class="c1" for="pwd">Password</label>
        <input type="password" name="pwd">
        <label class="c2">I AM A</label>
        <label class="c2">
            <input type="radio" value="DESIGNER" name="position">DESIGNER</label>
        <label class="c2">
            <input type="radio" name="position" value="DEVELOPER">DEVELOPER</label>
        <label class="c2">
            <input type="radio" name="position" value="NEITHER, I JUST HAVE IDEAS">NEITHER, I JUST HAVE IDEAS</label>
        <label class="c2">
            <input type="checkbox" name="terms" value="agreements">I Have Read and Agree to the <span style="color:#097CA2"> Terms of Service </span> 
        </label>
        <input type="submit" id="submit" name="sign_up" value="SIGN UP NOW">
    </form>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $('#registerationForm').validate({
        rules: {
            usrEmail: {
                required: true,
                email: true
            },
            usrName: "required",
            pwd: {
                required: true,
                minlength: 5,
                maxlength: 18
            },
            terms: "required",
            position: "required",
        },
        messages: {
            usrEmail: "Please enter a valid email address",
            usrName: "Your Name is needed. Please enter it",
            pwd: {
                required: "please provide a password",
                minlength: "password must be minimum of 5 characters"
            },
            position: "Please select any position",
            terms: "please accept our policy"
        }
    });
});
</script>

Answer 2

只需删除引号。写 true 而不是写 "true"

Answer 3

我认为该插件会寻找IDs。

尝试添加Id属性：

<input type="text" name="usrEmail" id="usrEmail">