3 Replies - 551 Views - Last Post: 08 April 2013 - 08:18 AM

#1 gemoney  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 112
  • Joined: 30-October 09

Form validation only work partially

Posted 07 April 2013 - 01:54 PM

I am not sure what the issue is with my form validation, but it will not validate this two functions
if(zipValidator(zip, "Please enter a valid zip code")){                                        
    if(phoneValidator(phone, "Please enter a valid phone number")){ 
Which prevent the email from getting validated. When I remove those two functions the email validate fine. I wrote the code through, check my ids and brackets and I can't figure what the issue. Thanks!

Javascript
function formValidator(){
            // Make quick references to our fields
            var firstname = document.getElementById('firstname');
            var lastname = document.getElementById('lastname');
            var address = document.getElementById('address');
            var zip = document.getElementById('zip');
            var city = document.getElementById('city');
            var state = document.getElementById('state');            
            var email = document.getElementById('email');            
            var phone = document.getElementById('phone');

            // Check each input in the order that it appears in the form!
            if (isAlphabet(firstname, "Please enter a valid first name")) {
                if(isAlphabet(lastname, "Please enter a valid last name")){
                        if(isAlphanumeric(address, "Please enter a valid address")){
                            if(isAlphabet(city, "Please enter a valid city")){
                                if(madeSelection(state, "Please Choose a state")){
                                    if(zipValidator(zip, "Please enter a valid zip code")){                                        
                                        if(phoneValidator(phone, "Please enter a valid phone number")){                                                            
                                            if(emailValidator(email, "Please enter a valid email address")){
                                                return true;
                                            }
                                        } 
                                    }
                                }
                            }
                        }
                 }
            }
            
            return false;
        }

        function notEmpty(elem, helperMsg){
                if(elem.value.length == 0){
                        alert(helperMsg);
                        elem.focus(); // set the focus to this input
                        return false;
                }
                return true;
        }
        
        function isAlphabet(elem, helperMsg){
                var alphaExp = /^[a-zA-Z]+$/;
                if(elem.value.match(alphaExp)){
                        return true;
                }else{
                        alert(helperMsg);
                        elem.focus();
                        return false;
                }
        }
        
        function zipValidator(elem, helperMsg){
                var zipExp = /^\[0-9{5}-?\([0-9]{4})?$/;
                if(elem.value.match(zipExp)){
                        return true;
                }else{
                        alert(helperMsg);
                        elem.focus();
                        return false;
                }
        }      
        
        function isAlphanumeric(elem, helperMsg){
                var alphaExp = /[,#-\/\s\!\@\$.....]/gi;
                if(elem.value.match(alphaExp)){
                        return true;
                }else{
                        alert(helperMsg);
                        elem.focus();
                        return false;
                }
        }
        
        function madeSelection(elem, helperMsg){
                if(elem.value == "Please Choose"){
                        alert(helperMsg);
                        elem.focus();
                        return false;
                }else{
                        return true;
                }
        }
        
        function phonevalidator(elem, helperMsg){
                var phoneExp = /^\(?[0-9]{3})?-?\[0-9]{3}-?\[0-9]{4}$/;
                if(elem.value.match(phoneExp)){
                        return true;
                }else{
                        alert(helperMsg);
                        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;
                }
        }


HTML
<form onsubmit="return formValidator();" >
            <table width="300" border="1" align="left">
                <tr>
                    <td colspan="2" bgcolor="#0000FF">
                    <div align="center"><strong>Billing Information</strong></div>
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">First Name</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="firstname" id="firstname" value="" maxlength="15" />
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">Last Name</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="lastname" id="lastname" value="" maxlength="50"/>
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">Address</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="address" id="address" value="" maxlength="50" />
                    </td>
                </tr>            
                <tr>
                    <td width="50%">
                    <div align="right">City</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="city" id="city" value="" maxlength="50" />
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">State</div>
                    </td>
                    <td width="50%">
                        <select name="state" id='state'>
                            <option>Please Choose</option>
                            <option>AL</option>
                            <option>AK</option>
                            <option>AZ</option>
                            <option>AR</option>
                            <option>CA</option>
                            <option>CO</option>
                            <option>CT</option>
                            <option>DE</option>
                            <option>FL</option>
                            <option>GA</option>
                            <option>HI</option>
                            <option>ID</option>
                            <option>IL</option>
                            <option>IN</option>
                            <option>IA</option>
                            <option>KS</option>
                            <option>KY</option>
                            <option>LA</option>
                            <option>ME</option>
                            <option>MD</option>
                            <option>MA</option>
                            <option>MI</option>
                            <option>MN</option>
                            <option>MS</option>
                            <option>MO</option>
                            <option>MT</option>
                            <option>NE</option>
                            <option>NV</option>
                            <option>NH</option>
                            <option>NJ</option>
                            <option>NM</option>
                            <option>NY</option>
                            <option>NC</option>
                            <option>ND</option>
                            <option>OH</option>
                            <option>OK</option>
                            <option>OR</option>
                            <option>PA</option>
                            <option>RI</option>
                            <option>SC</option>
                            <option>SD</option>
                            <option>TN</option>
                            <option>TX</option>
                            <option>UT</option>
                            <option>VT</option>
                            <option>VA</option>
                            <option>WA</option>
                            <option>WV</option>
                            <option>WI</option>
                            <option>WY</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">Zip Code</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="zip" id="zip" size="12" />
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">Phone</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="phone" id="phone" />
                    </td>
                </tr>
                <tr>
                    <td width="50%">
                    <div align="right">Email</div>
                    </td>
                    <td width="50%">
                    <input type="text" name="email" id="email" />
                    </td>
                </tr>

                <tr> 
                    <td width="50%" colspan="2" align="left">&nbsp;</td>
                </tr>
                <tr bgcolor="#0000FF"> 
                  <td width="50%" colspan="2" align="center">
                      <div><strong>&nbsp;Credit Card Information</strong></div>
                  </td>
                </tr>
                <tr>                                         
                  <td width="50%" align="right">
                  <div>Payment Method: </div>
                  </td> 
                  <td width="50%" align="left">
                   <select id='cardType'>
                    <option>Please Choose</option>
                    <option>Visa</option>
                    <option>MasterCard</option>
                    <option>American Express</option>
                    <option>Discover</option>
                  </select>                                              
                </td>                                          
                </tr>
                <tr> 
                  <td width="50%" align="right" >
                  <div>Credit Card #</div>
                  </td>
                  <td width="50%" align="left">
                  <input id="cardnumber" type="text" size="19" />
                  </td>
                </tr>
                <tr> 
                    <td width="50%" align="right" />
                    <div>Expiration Date</div>
                    </td>
                    <td colspan="2" align="left">
                        <SELECT id="month" >
                            <option value="" SELECTED>Month</option>
                            <option>01</option>
                            <option>02</option>
                            <option>03</option>
                            <option>04</option>
                            <option>05</option>
                            <option>06</option>
                            <option>07</option>
                            <option>08</option>
                            <option>09</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                        </SELECT> /
                        <SELECT id="year">
                            <option value="" SELECTED>Year</option>
                            <option value="13">2013</option>
                            <option value="14">2014</option>
                            <option value="15">2015</option>
                            <option value="16">2016</option>
                            <option value="17">2017</option>
                            <option value="18">2018</option>
                            <option value="19">2019</option>
                            <option value="20">2020</option>
                        </SELECT>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input type='submit' value='Submit Form' />
                    </td>
                </tr>
            </table>           
        </form>


Is This A Good Question/Topic? 0
  • +

Replies To: Form validation only work partially

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3252
  • View blog
  • Posts: 10,902
  • Joined: 12-December 12

Re: Form validation only work partially

Posted 07 April 2013 - 02:04 PM

You have an unmatched square bracket in your regex, which I have corrected here:

var zipExp = /^\[0-9]{5}-?\([0-9]{4})?$/;

But you also have an unmatched brace - a closing ) which has no matching opening brace (because \( escapes this brace as a literal character). I haven't attempted to correct this as I haven't worked out where you want it placed.

This post has been edited by andrewsw: 07 April 2013 - 02:08 PM

Was This Post Helpful? 1
  • +
  • -

#3 gemoney  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 112
  • Joined: 30-October 09

Re: Form validation only work partially

Posted 07 April 2013 - 03:51 PM

Thanks andrewsw, I got the zip code part fixed
 var zipExp = /^\d{5}$|^\d{5}-?\d{4}$/;
I am still having issues with the phone number part. I thought maybe it had something to do with my regexp also, I change expression around to verify but unsuccessful. Here is my current regexp for the phone number
var phoneExp = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
Thanks
Was This Post Helpful? 0
  • +
  • -

#4 gemoney  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 112
  • Joined: 30-October 09

Re: Form validation only work partially

Posted 08 April 2013 - 08:18 AM

I got this working, now I am trying to add credit card validation using regular expression. I got the first if-statement to work for the first validation,any additional doesn't work. I need help in implementing the validation for each credit card. Thank You!
Javascript
function formValidator(){				
				var cardType = document.getElementById('cardType');
				var cardNumber = document.getElementById('cardNumber');
				//var cardno1 = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
				
				 
				if(cardTypeSelection(cardType, "Please select a card")) {
					if(creditCardNumber(cardNumber, "Please enter a valid credit card number")) {						
						return true;
					}
				}

				return false;
			}  
				 
	
			function cardTypeSelection(elem, helperMsg){
			 if(elem.value == "Please Choose"){
				  alert(helperMsg);
				  elem.focus();
				  return false;
			   }
			 else{
				  return true;
			   }
			}
			
			function creditCardNumber(elem, helperMsg){				
				var cardno1 = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
				var cardType1 = "Visa";
		
				var cardno2 = /^(?:5[1-5][0-9]{14})$/;
				var cardType2 = "MasterCard";
				
				/*var cardno3 = /^(?:3[47][0-9]{13})$/;
				var cardType3 = "AmericanExpress";
				
				var cardno4 = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;
				var cardType4 = "Discover";*/
				
				if(elem.value.match(cardno1) && (cardType1=="Visa")){
					return true;				
				}else if(elem.value.match(cardno2) && (cardType2=="MasterCard")){
					return true;
				}else {	
					alert(helperMsg);
					elem.focus();
					return false;				   
				}
			}

This post has been edited by gemoney: 08 April 2013 - 08:20 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1