I have jQuery validation library used on application, but when I validate before submit is not working. When inspect the element its said line 1 of this file below, need some help.
$(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>
As per the advice at
I have added a ready method.
Change all the require attributes to required, there's a typo in firstName, add a script link to the validate.js library
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
and it works.
$(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>