使用jQuery Validation库时提交前表单无验证消息问题求助

问题描述 #

使用jQuery Validation库实现表单验证，但提交前无验证提示，功能完全失效，浏览器控制台提示文件第1行存在错误。

核心错误及修复方案 #

1. 规则属性拼写错误 #

所有必填规则的属性名写错：

• 错误写法：requuire/require
• 正确写法：required（jQuery Validation的必填规则关键字是required）

2. 自定义规则未定义 #

代码中使用了consent:true和terms:true两个自定义规则，但未提前定义，需要添加规则定义代码。

3. HTML元素ID重复 #

单选按钮组payslip和consent的两个选项使用了相同ID，HTML要求ID唯一，需修改为不同ID。

修正后的完整代码 #

JavaScript部分 #

$(function (){
    // 自定义规则：确保同意项选中YES
    $.validator.addMethod("consent", function(value, element) {
        return value === "YES";
    }, "You must consent to proceed");

    $.validator.addMethod("terms", function(value, element) {
        return element.checked;
    }, "You must accept the terms");

    $("#personalloan").validate({
        rules: {
            firstName:{
                required:true
            },
            lastName:{
                required:true
            },
            idnumber:{
                required:true,
                minlength:13
            },
            cellno:{
                required:true,
                minlength:10
            },
            email:{
                required:true,
                email:true
            },
            employmentStatus: {
                required:true
            },
            salaryPaymentFrequency: {
                required:true
            },
            payslip: {
                required:true
            },
            consent: {
                required:true,
                consent:true
            },
            terms: {
                required:true,
                terms:true
            }
        },
        messages: {
            firstName:"This field is mandatory",
            lastName:"This field is mandatory",
            idnumber:"This field is mandatory",
            cellno:"This field is mandatory",
            email:"This field is mandatory",
            employmentStatus:"This field is mandatory",
            salaryPaymentFrequency:"This field is mandatory",
            payslip:"This field is mandatory",
            consent:"This field is mandatory",
            terms:"This field is mandatory"
        }
    });
});

HTML部分 #

<form id="personalloan" action="qualify.php" method="post" >
    <label for="firstName">First name:</label><br>
    <input type="text" id="firstName" name="firstName"><br>
    <label for="lastName">Last name:</label><br>
    <input type="text" id="lastName" name="lastName" ><br>
    <label for="idnumber"> ID Number:</label><br>
    <input type="text" id="idnumber" name="idnumber"><br>
    <label for="cellno"> Cellphone Number:</label><br>
    <input type="text" id="cellno" name="cellno"><br>
    <br>
    <label for="email"> Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <br>
    <label for="employmentStatus">Employment Status:</label><br>
    <select name="employmentStatus" id="employmentStatus">
        <option value="">Choose an option </option>
        <option value="Permanently employment for a period of three months">Permanently employment for a period of three months </option>
        <option value="Short term contract for a period of three months">Short term contract for a period of three months</option>
        <option value="Other">Other</option>
    </select><br>
    <br>
    <label for="salaryPaymentFrequency">Salary Payment Frequency:</label><br>
    <input type="text" id="salaryPaymentFrequency" name="salaryPaymentFrequency"><br>
    Do you have a payslip?<br>
    <input type="radio" id="payslip_yes" name="payslip" value="YES">
    <label for="payslip_yes">YES</label>
    <input type="radio" id="payslip_no" name="payslip" value="NO">
    <label for="payslip_no">NO</label><br>
    Do you consent to give us doing a credit check?<br>
    <input type="radio" id="consent_yes" name="consent" value="YES">
    <label for="consent_yes">YES</label>
    <input type="radio" id="consent_no" name="consent" value="NO">
    <label for="consent_no">NO</label><br>
    <br>
    <input type="checkbox" id="terms" name="terms" value="YES">
    <label for="terms">I accept the T's and C's.</label><br>
    <input type="checkbox" id="personalinfo" name="personalinfo" value="YES">
    <label for="personalinfo"> I give consent to my personal information being shared with a selected third party in order for them to contact me.</label><br>
    <br>
    <input type="submit" value="Submit">
</form>

额外说明 #

• 确保已正确引入jQuery和jQuery Validation库的脚本文件，且顺序为：先引入jQuery，再引入Validation库。
• 自定义规则可根据实际需求调整逻辑，示例中consent规则要求选中YES，terms规则要求复选框勾选。

内容的提问来源于stack exchange，提问作者teddy107 Van Weit