A simple jQuery form validation script

0 votes

I made a simple validation form using jQuery. It's working alright. The thing is I'm not satisfied with my code. Is there another way around to write my code with the same output result?

$(document).ready(function(){

$('.submit').click(function(){
    validateForm();   
});

function validateForm(){

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var names = $('#nameInput').val();
    var company = $('#companyInput').val();
    var email = $('#emailInput').val();
    var telephone = $('#telInput').val();
    var message = $('#messageInput').val();

    var inputVal = new Array(names, company, email, telephone, message);

    var inputMessage = new Array("name", "company", "email address", "telephone number", "message");

     $('.error').hide();

        if(inputVal[0] == ""){
            $('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
        } 
        else if(!nameReg.test(names)){
            $('#nameLabel').after('<span class="error"> Letters only</span>');
        }

        if(inputVal[1] == ""){
            $('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
        }

        if(inputVal[2] == ""){
            $('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
        } 
        else if(!emailReg.test(email)){
            $('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
        }

        if(inputVal[3] == ""){
            $('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
        } 
        else if(!numberReg.test(telephone)){
            $('#telephoneLabel').after('<span class="error"> Numbers only</span>');
        }

        if(inputVal[4] == ""){
            $('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
        }       
}   

});

May 31 in JQuery by Edureka
• 13,600 points
12 views

1 answer to this question.

0 votes

use jQuery validation plugin to validate forms' data in easier way.

first,add jQuery library in your file.

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
then add javascript code:
$(document).ready(function() {
   $("#form").validate();
});
</script>
answered Jun 1 by Edureka
• 13,600 points

Related Questions In JQuery

0 votes
1 answer

Submit a form using jQuery

This method is a shortcut for .on( ...READ MORE

answered Jun 6 in JQuery by Edureka
• 13,600 points
8 views
0 votes
0 answers

Jquery validation plugin - TypeError: $(...).validate is not a function

My script throw errors: TypeError: jQuery.validator is undefined ...READ MORE

Jun 7 in JQuery by Edureka
• 13,600 points
27 views
0 votes
1 answer

How to reset a form using jQuery with .reset() method

<input type="reset"> Syntax for reset(): formObject.reset() Syntax to convert ...READ MORE

answered Jun 16 in JQuery by rajatha
• 3,540 points
11 views
0 votes
1 answer

How to generate a simple popup using jQuery

To create a popup, add the data-role="popup" ...READ MORE

answered Jun 17 in JQuery by rajatha
• 3,540 points
14 views
0 votes
1 answer

Jquery form submit validation

Bind a function to the submit event of the ...READ MORE

answered 6 days ago in JQuery by rajatha
• 3,540 points
6 views
0 votes
1 answer

How to focus on a form input text field on page load using jQuery?

In this example the form input text ...READ MORE

answered 5 days ago in JQuery by rajatha
• 3,540 points
3 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
1,437 views
0 votes
1 answer

How to check if a jQuery plugin is loaded?

Hello @kartik, for the plugins that doesn't use ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
696 views
0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,600 points
20 views
0 votes
1 answer

How to disable all <input > inside a form with jQuery?

To disable all form elements inside 'target', ...READ MORE

answered Jun 3 in JQuery by Edureka
• 13,600 points
8 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP