HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Form Validation (JQuery)

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
formjqueryvalidation

Problem

I made a simple form validation. It's working alright. The thing is I want my code to be optimized. Can somebody show me some pointers to improve my code? Thanks in advance.

$(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 = ["name", "company", "email address", "telephone number", "message"];

    var textId = ["#nameLabel", "#companyLabel", "#emailLabel", "#telephoneLabel", "#messageInput"];

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

        if($.trim(inputVal[0]) === ""){
            $('#nameLabel').after(' Please enter your ' + inputMessage[0] + '');

        }else if(!nameReg.test(names)){
            $('#nameLabel').after(' Letters only');
        }

        if($.trim(inputVal[1]) === ""){
            $('#companyLabel').after(' Please enter your ' + inputMessage[1] + '');
        }

        if($.trim(inputVal[2]) === ""){
            $('#emailLabel').after(' Please enter your ' + inputMessage[2] + '');

        }else if(!emailReg.test(email)){
            $('#emailLabel').after(' Please enter a valid email address');
        }

        if($.trim(inputVal[3]) === ""){
            $('#telephoneLabel').after(' Please enter your ' + inputMessage[3] + '');

        }else if(!numberReg.test(telephone)){
            $('#telephoneLabel').after(' Numbers only');
        }

        if($.trim(inputVal[4]) === ""){
            $('#messageLabel').after(' Please enter your ' + inputMessage[4] + '');
        }   

    return false;

}   

});

Solution

-
First of all, you shouldn't use $('.submit').click() but $('#myForm').submit() as you will be able to submit forms by pressing enter too.

-
To check if a string is a number, use !isNan(string) (see this answer for more information).

-
Email regex are difficult things. Just check if there is someting before the @ (with .+?) and if there is something after the @ (again with .+?) and if that last part contains a . and a couple of characters (from 2 to 6)

-
It would make the function a lot easier if you put all specific code outside it. E.g:

validateForm({
'#nameInput': {
'valid': function (value) {
return /^[a-z]+$/i.test(value);
},
'label': '#nameLabel',
'messages': {
'empty': 'Please enter your name',
'invalid': 'Letters only',
},
},
'#companyInput': {
'label': '#companyLabel',
'messages': {
'empty': 'Please enter your company',
},
},
// ...
});

Context

StackExchange Code Review Q#23152, answer score: 2

Revisions (0)

No revisions yet.