Jquery：表单验证不起作用

Question

我对 Jquery 很陌生，希望你们能帮助我解决这个 jquery 验证问题。

一直在尝试验证表单，但它根本没有验证。它接受我在字段中输入的任何内容，无论我设置了什么限制。

请帮忙。谢谢。

这是我的代码：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

    <script type="text/javascript">
    $(function(){
    $('#form').validate({
    alert("bbbb");
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 20,
            lettersonly: true
        },
        ssn: {
            required: true,
            minlength: 9,
            maxlength: 9,
            nowhitespace: true
        },
        gender: {
            required: true
        },
        mobile: {
            required: true,
            minlength: 10,
            maxlength: 13,
            digits: true
        },
        address: {
            required: true,
            minlength: 10,
        },
        email: {
            required: true,
            minlength: 6,
            email: true
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Name should be more than 2 characters",
            maxlength: "Name should be less than 20 characters",
            lettersonly: "Name should contain only letters"
            },
        ssn: {
            required: "Please enter your NRIC",
            minlength: "NRIC should be more than 9 characters",
            maxlength: "NRIC should be less than 9 characters",
            nowhitespace: "NRIC should not have any spaces"
            },
        gender: {
            required: "Please select your gender",
            },
        mobile: {
            required: "Please enter your mobile number",
            minlength: "Mobile number should be more than 10 characters",
            maxlength: "Mobile number should be less than 13 characters",
            digits: "Mobile number should contain only digits"
            },
        address: {
            required: "Please enter your address",
            minlength: "Address should be more than 10 characters",
            },
        email: {
            required: "Please enter your email address",
            minlength: "Password should be more than 6 characters",
            email: "Please enter a valid email address"
            }
    },
    });

    $("#submit").click(function(){
        $("#form").submit();
        return false;
        });

    });
    </script>

    <div id="form">
    <center>
    <form id="form">
    <div class="col-xs-12">
    <input type="text" name="name" id="name" placeholder="Name" required />
    </div>
    <div class="col-xs-12">
    <input type="text" name="nric" id="nric" placeholder="NRIC" required />
    </div>
    <div class="col-xs-12">
    <select class="dropdown" id="gender" onChange="changeColor(this)">
    <option value="" disabled selected>Gender</option>
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select>
    </div>
    <div class="col-xs-12">
    <input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
    </div>
    <div class="col-xs-12">
    <input type="text" name="address" id="address" placeholder="Address" required />
    </div>
    <div class="col-xs-12">
    <input type="email" name="email" id="email" placeholder="Email" required />
    </div>
    <input id="submit" class="button" type="submit" value="submit"/>
    </form>
</center>
</div>

Answer 1

您有 2 个带有 id="form" 的元素，因此将验证器分配给 div 而不是 form。

将div 的id 值更改为其他值。

另外additional-methods.js文件必须在query.validate.js之后添加，并且由于validate中的alert()存在语法错误所以

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<div>
    <center>
        <form id="form">
            <div class="col-xs-12">
                <input type="text" name="name" id="name" placeholder="Name" required />
            </div>
            <div class="col-xs-12">
                <input type="text" name="nric" id="nric" placeholder="NRIC" required />
            </div>
            <div class="col-xs-12">
                <select class="dropdown" id="gender" onChange="changeColor(this)">
                    <option value="" disabled selected>Gender</option>
                    <option value="female">Female</option>
                    <option value="male">Male</option>
                </select>
            </div>
            <div class="col-xs-12">
                <input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
            </div>
            <div class="col-xs-12">
                <input type="text" name="address" id="address" placeholder="Address" required />
            </div>
            <div class="col-xs-12">
                <input type="email" name="email" id="email" placeholder="Email" required />
            </div>
            <input id="submit" class="button" type="submit" value="submit"/>
        </form>
    </center>
</div>

然后

jQuery(function ($) {
    $('#form').validate({
        rules: {
            name: {
                required: true,
                minlength: 2,
                maxlength: 20,
                lettersonly: true
            },
            ssn: {
                required: true,
                minlength: 9,
                maxlength: 9,
                nowhitespace: true
            },
            gender: {
                required: true
            },
            mobile: {
                required: true,
                minlength: 10,
                maxlength: 13,
                digits: true
            },
            address: {
                required: true,
                minlength: 10,
            },
            email: {
                required: true,
                minlength: 6,
                email: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Name should be more than 2 characters",
                maxlength: "Name should be less than 20 characters",
                lettersonly: "Name should contain only letters"
            },
            ssn: {
                required: "Please enter your NRIC",
                minlength: "NRIC should be more than 9 characters",
                maxlength: "NRIC should be less than 9 characters",
                nowhitespace: "NRIC should not have any spaces"
            },
            gender: {
                required: "Please select your gender",
            },
            mobile: {
                required: "Please enter your mobile number",
                minlength: "Mobile number should be more than 10 characters",
                maxlength: "Mobile number should be less than 13 characters",
                digits: "Mobile number should contain only digits"
            },
            address: {
                required: "Please enter your address",
                minlength: "Address should be more than 10 characters",
            },
            email: {
                required: "Please enter your email address",
                minlength: "Password should be more than 6 characters",
                email: "Please enter a valid email address"
            }
        },
    });
});

演示：Fiddle

Answer 2

您需要在库中创建自定义规则 像这样

$.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
}

然后像这样使用它

    rules: {
        gender: {valueNotEquals: "default"}                                             
    },
    messages: {
        gender: { valueNotEquals: "Please select a payment method"}           

    }