jquery 提交前验证表单未显示任何验证消息?

4sup72z8  于 2023-03-07  发布在  jQuery
关注(0)|答案(1)|浏览(168)

我有jQuery验证库上使用的应用程序,但当我提交前验证是不工作。当检查其元素说,行1这个文件下面,需要一些帮助。

$(function (){
$("#personalloan").validate({
    rules: {
        firstName:{
            requuire:true
        },
        lastName:{
            require:true
        },
        idnumber:{
            require:true,
            minlength:13
        },
        cellno:{
            require:true,
            minlength:10
        },
        email:{
            require:true,
            email:true
        },
        employmentStatus: {
            require:true
        },
        salaryPaymentFrequency: {
            require:true
        },
        payslip: {
            require:true
        },
        consent: {
            require:true,
            consent:true
        },
        terms: {
            require: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 application
<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" name="payslip" value="YES">
                    <label for="YES">YES</label>
                    <input type="radio" id="payslip" name="payslip" value="NO">
                    <label for="NO">NO</label><br>
                    Do you consent to give us doing a credit check?<br>
                    <input type="radio" id="consent" name="consent" value="YES">
                    <label for="YES">YES</label>
                    <input type="radio" id="consent" name="consent" value="NO">
                    <label for="NO">NO</label><br>
                    <br>
                    <input type="checkbox" id="terms" name="terms" value="YES">
                    <label for="terms">I accept the <a href="doc/Website Terms and Conditions Policy and Procedure (ACI).pdf"> T's and C's.</a></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>
            </div>
        </div>
guz6ccqo

guz6ccqo1#

根据建议
https://stackoverflow.com/tags/jquery-validate/info
我添加了一个ready方法。
将所有require属性更改为requiredfirstName中存在排印错误,添加指向validate.js库的脚本链接
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
而且很有效。

$(document).ready(function() { 
$("#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"
    
    }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>

<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" name="payslip" value="YES">
                    <label for="YES">YES</label>
                    <input type="radio" id="payslip" name="payslip" value="NO">
                    <label for="NO">NO</label><br>
                    Do you consent to give us doing a credit check?<br>
                    <input type="radio" id="consent" name="consent" value="YES">
                    <label for="YES">YES</label>
                    <input type="radio" id="consent" name="consent" value="NO">
                    <label for="NO">NO</label><br>
                    <br>
                    <input type="checkbox" id="terms" name="terms" value="YES">
                    <label for="terms">I accept the <a href="doc/Website Terms and Conditions Policy and Procedure (ACI).pdf"> T's and C's.</a></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>
            </div>
        </div>

相关问题