Click here to Skip to main content
15,936,802 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi Team

I have a problem with my jquery form, i am using jquery validation plugin and all libraries are imported from the form right. But now the form before a user insert data its not validation before submit and when inspect the element its complaining about line 1 of my jquery script and cant see what it is from the browser.

What I have tried:

<pre lang="Javascript"><pre>// jquery form validation
/**
 *@au:Gcobani Mkontwana
 @date:04/03/2023
 @ return error validation message.
 *function validates user before apply for loan.
  fields are very mandatory for quality check.
 */
```
`
$(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>`
```
Posted
Updated 4-Mar-23 9:12am
Comments
Member 15627495 4-Mar-23 6:31am    
hi !

rules: {
        firstName:{
            requuire:true // syntax error ( double uu )
Member 15627495 4-Mar-23 6:38am    
about modern Html 5 and input validation,
look at the "required","placeHolder", by using those attributes in your html INPUT, you'll have less code to write, and less filtering to do before submit.

to filter input in your form you have the attribute HTML 5 : "pattern=" attribute. with it you can define a 'pattern' for coming validation.

1 solution

Hi Team

I have managed to do the following after debugging the steps back, i forgot to put the document before the function because i am using jquery validator plugin not javascript itself. DOM element by rule does not support that rule.

/**
 *@au:Gcobani Mkontwana
 @date:04/03/2023
 @ return error validation message.
 *function validates user before apply for loan.
  fields are very mandatory for quality check.
 */

  <pre lang="Javascript">$(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"
        
        }
    });
    });
JavaScript

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900