patternjavascriptMinor
Form Validation (JQuery)
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
-
To check if a string is a number, use
-
Email regex are difficult things. Just check if there is someting before the
-
It would make the function a lot easier if you put all specific code outside it. E.g:
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.