Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript form validation

    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!

    Code:
     <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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    This seems to me to be pretty complex ...
    Code:
    	// 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 ...
    Code:
      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).

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,090
    Thanks
    15
    Thanked 246 Times in 246 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •