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,640 points
25 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,640 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,640 points
21 views
0 votes
1 answer

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

The "$(...). validate is not a function" ...READ MORE

answered Jun 28 in JQuery by rajatha
• 6,640 points
454 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
• 6,640 points
79 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
• 6,640 points
79 views
0 votes
1 answer

Jquery form submit validation

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

answered Jun 20 in JQuery by rajatha
• 6,640 points
25 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 Jun 21 in JQuery by rajatha
• 6,640 points
7 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,740 points
1,562 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,740 points
738 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,640 points
90 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,640 points
28 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