...

View Full Version : Javascript form validation



jmt0
06-30-2012, 09:15 PM
Hi all,

New to Javascript and trying to validate an HTML form. I have a function formValidator I'm using in the form to validate all the functions at once. I need to validate name fields to 1) Make sure it is not empty and 2) Make sure it does not contain numbers. I've written a function for this purpose -- function validateName(elem).

I've been able to get the function to work fine on the firstname. However, when I try to use it on the lastname field it doesn't work.

Also there seems to be a problem if I use 2 different functions for the same field -- such as email, 1) trying to check to make sure an email address was entereed and 2) to make sure it is a valid email address.

Any help is greatly appreciated!




<script type='text/javascript'>

function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var middlename = document.getElementById('middlename');
var lastname = document.getElementById('lastname');
var address1 = document.getElementById('address1');
var address2 = document.getElementById('address2');
var city = document.getElementById('city');
var state = document.getElementById('state');
var zipcode = document.getElementById('zipcode');
var username = document.getElementById('username');
var password = document.getElementById('password');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var dob = document.getElementById('dob');


// Check each input in the order that it appears in the form.

if(validateName(firstname)){
if(validateName(lastname)){
if(IsEmpty(address1, "Please enter a valid Address 1")){
if(IsEmpty(zipcode, "Please enter a valid Zip Code")){
if(lengthRestriction(username, 'Username', 6, 40)){
if(lengthRestriction(password, 'Password', 6, 20)){
if(IsEmpty(email, "Please enter an email address")){
if(emailValidator(email, "Email address is not valid; please try again.")){
return true; }}}}}}
return false; }


function validateName(elem) {
if(elem.value.length == 0){
alert("Please enter your name");
elem.style.background = 'yellow';
elem.focus(); // set the focus to this input
return false;
}
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
elem.style.background = 'white';
return true;
}else{
alert("Name cannot contain numbers");
elem.style.background = 'yellow';
elem.focus(); // set the focus to this point
return false;
}
return true;
}


function IsEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.style.background = 'yellow';
elem.focus(); // set the focus to this input
return false;
}
return true;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.style.background = 'yellow';
elem.focus(); // set the focus to this input
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z ]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function lengthRestriction(elem, elemname, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter a " +elemname+ " between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>

jmrker
07-01-2012, 03:45 AM
This seems to me to be pretty complex ...


// Check each input in the order that it appears in the form.

if(validateName(firstname)){
if(validateName(lastname)){
if(IsEmpty(address1, "Please enter a valid Address 1")){
if(IsEmpty(zipcode, "Please enter a valid Zip Code")){
if(lengthRestriction(username, 'Username', 6, 40)){
if(lengthRestriction(password, 'Password', 6, 20)){
if(IsEmpty(email, "Please enter an email address")){
if(emailValidator(email, "Email address is not valid; please try again.")){
return true; }}}}}}
return false; }


To simplify your checks, you might consider the following ...


var errMsg = [];
// Check each input in the order that it appears in the form.

if(validateName(firstname)){ errMsg.push('Missing first name'; }
if(validateName(lastname)){ errMsg.push('Missing last name'; }
if(IsEmpty(address1)) { errMsg.push("Please enter a valid Address 1"); }
if(IsEmpty(zipcode)) { errMsg.push("Please enter a valid Zip Code"); }
if(lengthRestriction(username, 'Username', 6, 40)){ errMsg.push('Username invalid'); }
if(lengthRestriction(password, 'Password', 6, 20)){ errMsg.push('Password is invalid'); }
if(IsEmpty(email)) { errMsg("Please enter an email address"); }
if(emailValidator(email)) { errMsg("Email address is not valid; please try again."); }
if (errMsg.length-1) < 0) { return true; } // no errors
else { // some error found
alert('Found errors:\n'+errMsg.join('\n')); return false; }

All checks assume return true if error is found (I did not check all your functions).

DrDOS
07-01-2012, 03:52 AM
Simplify my friend. Just set a flag at the top of your script or function.
var flag = 1;
Course thru the form with a loop, if anything fails, just set the flag to 0. Then at the end, if the flag == 0 tell em' to fix the problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum