Jquery No Email Verification

spoggles
spoggles used Ask the Experts™
on
Hello experts!

Here is what I'm trying to accomplish. In the name field of my form, I do not want someone to be able to submit e-mails. I got something to work, but it doesn't work 100% of the time.

The way it is supposed to work is if someone puts an email address in the name field, a box below the name field will appear and say 'No Emails Allowed'. When you first come to the page, the no emails allowed shows up no matter what. When you refresh the page and something is already in the field, then it "works". Can you help me?

I have attached the relevant HTML code below and the Jquery code in the code field. Here is the link to the development form that I am working on: http://dev.mytucker.com/dev/devForm/decals.htm. This will allow you to see the full code.

<tr>
   <td><label for="Name_A">Agent Name: </label></td>
    <td><input id="Name_A" name="Name_A" type="text" /></td>                                
</tr>
//Start the No Email Address in the Name Fields    
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var Name_A = $("#Name_A");
    var invalidName_A = $("#invalidName_A");
    var emailaddressVal_A = $("#Name_A").val();
   
    Name_A.blur(validateNoEmail);
   
    function validateNoEmail() {
                
        if (emailReg.test(emailaddressVal_A)) {
            invalidName_A.text("No Emails allowed");
            hasError = true;            
        }        
    }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Greg AlexanderLead Developer

Commented:
When I go to the link, the page works fine in IE7, IE8 and Chrome... what are you using?

Author

Commented:
The page works fine, it's just the no email in the name field that doesn't quite work.

Author

Commented:
I also forgot to say, the name check only occurs in Set 1 on the left hand side.
Greg AlexanderLead Developer

Commented:
I see your issue now.. let me check it out for a minute

Author

Commented:
Awesome, thank you very much! Let me know if you need anything!
Greg AlexanderLead Developer

Commented:
Almost done.. do you want all the name fields on both sides of the form to validate the same way?

Author

Commented:
Yes I do. You are a God send sir.
Greg AlexanderLead Developer

Commented:
First You need to replace this chunck of code on the webFormValidation.js


    //Start the No Email Address in the Name Fields    
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var Name_A = $(".NameVal");
    var invalidName_A = $("#invalidName_A");
    var emailaddressVal_A = $("#Name_A").val();
   
    Name_A.blur(validateNoEmail);
   
    function validateNoEmail() {
		if($(this).val() == ''){
			$("#"+$(this).attr("id")+"_check").text("");
		}else{
        	if (emailReg.test($(this).val())) {
				$("#"+$(this).attr("id")+"_check").text("No Emails allowed");
            	hasError = true;            
        	}else{
				$("#"+$(this).attr("id")+"_check").text("");	
			}
		}
    }

Open in new window

Lead Developer
Commented:
Next instead of telling you what I did, I will just paste in the whole page that I recerated and you will see the differences... let me know if this is exactly what you are needing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>F.C. Tucker - Decals Order Form</title>
    <style type="text/css">
        /*Global Settings*/
        * {margin: 0; padding: 0; font-family: Trebuchet MS, Helvetica, sans-serif; }
        a, img { border: 0 }        
        fieldset { margin: 5px 0px 30px 0px; text-align: left; background-color: #fbfbfb;
                   -border-radius: 5px;
                   -webkit-border-radius: 5px;
                   -moz-border-radius: 5px;                   
                   }           
        label { float: left; width: 150px; margin: 6px 0px;}        
        select { width: 160px; margin: 6px 0px;}
        input { width: 155px; margin: 6px 0px;}
        hr {width: 85%; margin: 0 auto;}
        
        /*Class Settings*/
        .wrapper{ width: 860px; margin: 0 auto; }        
        .title { font-weight: bold; font-size: 1.3em; margin-left: 30px; }
        .leftColumn {float: left; width: 400px; margin-left: 65px;}
        .leftColumnSigns {float: left; width: 410px; margin-left: 10px; margin-right: 10px;}        
        .rightColumnSigns {float: right; width: 410px; margin-right: 10px; text-align: center;}
        .leftColumnSigns fieldset, .rightColumnSigns fieldset {text-align: center; background-color: #fff; padding: 10px 0 10px 0;}
        .leftColumnSigns label, .rightColumnSigns label {margin-left: 40px;}
        .leftColumnSigns input, .rightColumnSigns input {margin-right: 30px;}
        .spacer { height: 10px; }
        .nameError { color: Red; }
        
        /*Error Settings*/
        #customForm input.error{
	        background: #f8dbdb;
	        border-color: #e77776;
        }
        
        /*Header Settings*/
        #headerWrapper { height: 105px; background-image: url('Images/header.jpg'); border-bottom: 1px solid black;}                        
        #header img { padding-top: 5px; }      
        
        /*Body Settigns*/
        #body { text-align: center; }  
                        
    </style>
    <script type="text/javascript" src="js/js-1.4.2.min.js"></script>    
    <script type="text/javascript" src="js/webFormJavascript.js"></script>
    <script type="text/javascript" src="js/webFormValidation.js"></script>    
    
</head>
<body>
    <div id="headerWrapper">
        <div class="wrapper" id="header">
            <a href="http://www.mytucker.com"><img src="logo.png" alt="Talk To Tucker" /></a>
        </div>
    </div> 
    <div class="wrapper">
        <div id="body">
            <br />                            
            <h1>Agent Sign Decal Order Form</h1> 
            <br />
            <p>This order form is for use by office Order Administrators only.</p>
            <br /> 
            <p>Please fill out the information below and use the appropriate spaces to order 
            decals for agents.</p>
            <br />
            <p>Need to order more than 5 sets of decals? Simply indicate "continued" in the 
            comments box and <br />complete and submit the form again as many times as necessary.</p>
            <br />
            <p>You will receive a confirmation email of this order.<br />
            If you have any questions, please call Jamie Chowning at 317-845-5051.</p>  
         </div> 
         
         <form id="customForm" action="sendDecalOrder.php" method="post">
                <fieldset>                                                                    
                        <div class="spacer"></div>                    
                        <span class="title">Office Order Information</span>
                        <div class="spacer"></div>   
                        <!--Begin Left Side of Office Order Information-->
                        <div class="leftColumn">
                            <table>
                                <tr>
                                    <td><label for="OfficeName">Metro Office: </label></td>
                                    <td><select id="OfficeName" name="OfficeName" onclick="populateMetroAddress(this.value)">
                                    <option selected="selected" value="None">Please Select an Office</option>
			                        <option value="Carmel">Carmel</option>			                            
			                        <option value="Castleton">Castleton</option>
			                        <option value="East">East</option>
			                        <option value="Fishers">Fishers</option>
			                        <option value="Keystone at the Crossing">Keystone at the Crossing</option>
			                        <option value="Meridian North/9277">Meridian North/9277</option>
			                        <option value="Meridian North/9279">Meridian North/9279</option>
			                        <option value="Noblesville">Noblesville</option>
			                        <option value="Northeast">Northeast</option>
			                        <option value="South">South</option>
			                        <option value="Suburban North">Suburban North</option>
			                        <option value="9201 Group">9201 Group</option>
			                        <option value="West">West</option>
			                        <option value="Zionsville">Zionsville</option>
			                        <option value="Corporate 9279">Corporate 9279</option>
                                    </select></td>
                                </tr>
                                <tr>                                    
                                    <td><label style="float: left;" for="orderDate">Order Date: </label></td>
                                    <td><input id="orderDate" name="orderDate" type="text" /></td>
                                </tr>              
                                <tr>
                                    <td><label for="orderedBy">Ordered By: </label></td>
                                    <td><input id="orderedBy" name="orderedBy" type="text" /></td>
                                    <td><span id="nameInfo"></span></td>
                                </tr>              
                                <tr>
                                    <td><label for="email">E-Mail Address: </label></td>
                                    <td><input id="email" name="email" type="text" /></td>
                                </tr>                                
                            </table>
                        </div>
                        <!--Begin right side of Office Order Information-->
                        <table> 
                            <tr>
                                <td><label for="OfficeAffiliateName">Affiliate Office: </label></td>
                                <td><select id="OfficeAffiliateName" name="OfficeAffiliateName" onclick="populateAffiliateAddress(this.value)">
                                    <option selected="selected" value="None">Please Select an Office</option>
			                        <option value="Anderson">Anderson</option>
			                        <option value="Anderson Commercial">Anderson Commercial</option>
			                        <option value="Auburn">Auburn</option>
			                        <option value="Bloomington">Bloomington</option>
			                        <option value="Columbus">Columbus</option>
			                        <option value="Crawfordsville">Crawfordsville</option>
			                        <option value="Evansville Commercial">Evansville Commercial</option>
			                        <option value="Evansville - Eagle Crest">Evansville - Eagle Crest</option>
			                        <option value="Evansville - East Virginia">Evansville - East Virginia</option>
			                        <option value="Evansville - Pearl">Evansville - Pearl</option>
			                        <option value="Ft. Wayne">Ft. Wayne</option>
			                        <option value="Ft. Wayne - Illinois">Ft. Wayne - Illinois</option>
			                        <option value="Goshen">Goshen</option>
			                        <option value="Greencastle">Greencastle</option>
			                        <option value="Henderson KY">Henderson KY</option>
			                        <option value="Jasper">Jasper</option>
			                        <option value="Kokomo">Kokomo</option>
			                        <option value="Lafayette">Lafayette</option>
			                        <option value="Lafayette Commercial">Lafayette Commercial</option>
			                        <option value="Marion">Marion</option>
			                        <option value="Muncie">Muncie</option>
			                        <option value="New Albany">New Albany</option>
			                        <option value="Newburgh">Newburgh</option>
			                        <option value="Pendleton">Pendleton</option>
			                        <option value="Princeton">Princeton</option>
			                        <option value="Rensselaer">Rensselaer</option>
			                        <option value="Seymour">Seymour</option>
			                        <option value="Shelbyville">Shelbyville</option>
			                        <option value="South Bend">South Bend</option>
			                        <option value="Terre Haute">Terre Haute</option>
			                        <option value="Valparaiso">Valparaiso</option>
			                        <option value="Vincennes">Vincennes</option>
                                </select></td>
                            </tr>                                                    
                            <tr>
                                <td><label for="deliveryDate">Delivery Date: </label></td>
                                <td><input id="deliveryDate" name="deliveryDate" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="phoneNumber">Phone Number: </label></td>
                                <td><input id="phoneNumber" name="phoneNumber" type="text" /></td>
                                <td><span id="phoneInfo"></span></td>
                            </tr>
                            <tr>
                                <td><label for="confirmEmail">Confirm E-Mail: </label></td>
                                <td><input id="confirmEmail" name="confirmEmail" type="text" /></td>                    
                            </tr>
                            <tr>
                                <td><label></label></td>
                                <td><input id="resetOffice" value="Click to Reset Office" type="button" /></td>
                            </tr>                              
                        </table>
                        <div class="spacer"></div>                                                
                </fieldset>
                <!--Start Shipping Information-->
                <fieldset>
                    <div class="spacer"></div>                    
                    <span class="title">Shipping Information</span>
                    <div class="spacer"></div>                       
                        <div class="leftColumn" id="shipping">
                            <table>
                                <tr>
                                    <td><label for="shipToOffice">Ship to your office?</label></td>
                                    <td><select id="shipToOffice" name="shipToOffice">
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select></td>                            
                                </tr>
                                <tr>
                                    <td><label for="address">Address: </label></td>                    
                                    <td><input id="address" name="address" type="text" /></td>
                                </tr>
                                <tr>
                                    <td><label for="cityStateZip">City, State, Zip: </label></td>
                                    <td><input id="cityStateZip" name="cityStateZip" type="text" /></td>
                                </tr>
                            </table>
                        </div>
                        <!--Standard and Special Delivery Messages-->
                        <table>
                            <tr>
                                <td><b>Standard Delivery:</b> Products ordered by Wednesday 5:00pm will be delivered the following Wednesday.</td>                                
                            </tr>
                            <tr>
                                <td><div class="spacer"></div></td>
                            </tr>
                            <tr>    
                                <td><b>Special Delivery:</b> There is a $15 delivery fee for orders less than $500.</td>
                            </tr>
                        </table> 
                        <div class="spacer"></div>                    
                </fieldset>
                
                <!--Start of Metro Signs Products-->                
                <fieldset id="decals">
                    <span class="title">F.C. Tucker Decals</span>
                    <div class="spacer"></div>
                    <p style="margin-left: 30px;"><b>NOTE:</b> Decals must include the Agent Name and Agent Contact (phone, email, OR web address).</p>                    
                    <div class="spacer"></div>
                    <!--Start Signs on Left Column-->
                    <div class="leftColumnSigns">
                      <fieldset>                                                    
                            <img src="Images/Tucker_Decal.jpg" alt="Tucker Decals" />                            
                            <p>Decals Price: $1.75/each <br />(minimum quanity of 10)</p>
                            <hr />
                            <p>Set 1</p>
                            <table>
                            <tr>
                                <td><label for="Quantity_A">Quantity Needed: </label></td>
                                <td><input id="Quantity_A" name="Quantity_A" type="text" value="0"/></td>
                            </tr>
                            <tr>
                                <td><label for="Name_A">Agent Name: </label></td>
                                <td><input id="Name_A" name="Name_A" type="text" class="NameVal" /></td>                                
                            </tr>
                            <tr>
                                <td></td>
                                <td><p id="Name_A_check" class="nameError"></p></td>
                            </tr>
                            <tr>
                                <td><label for="Contact_A">Agent Contact: </label></td>                            
                                <td><input id="Contact_A" name="Contact_A" type="text" /></td>
                            </tr>
                            </table>
                            <hr />
                     <p>Set 2</p>
                             <table>
                            <tr>
                                <td><label for="Quantity_B">Quantity Needed: </label></td>
                                <td><input id="Quantity_B" name="Quantity_B" type="text" value="0"/></td>
                            </tr>
                            <tr>    
                                <td><label for="Name_B">Agent Name: </label></td>
                                <td><input id="Name_B" name="Name_B" type="text" class="NameVal"/></td>
                            </tr>                            
                            <tr>
                              <td></td>
                              <td><p id="Name_B_check" class="nameError"></p></td>
                            </tr>
                            <tr>    
                                <td><label for="Contact_B">Agent Contact: </label></td>                            
                                <td><input id="Contact_B" name="Contact_B" type="text" /></td>
                            </tr>
                            </table>
                            <hr />
                     <p>Set 3</p>
                             <table>
                            <tr>
                                <td><label for="Quantity_C">Quantity Needed: </label></td>
                                <td><input id="Quantity_C" name="Quantity_C" type="text" value="0"/></td>
                            </tr>
                            <tr>    
                                <td><label for="Name_C">Agent Name: </label></td>
                                <td><input id="Name_C" name="Name_C" type="text" class="NameVal"/></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td><p id="Name_C_check" class="nameError"></p></td>
                            </tr>
                            <tr>    
                                <td><label for="Contact_C">Agent Contact: </label></td>                            
                                <td><input id="Contact_C" name="Contact_C" type="text" /></td>
                            </tr>
                            </table>
                            <hr />
                        <p>Set 4</p>
                          <table>
                            <tr>
                                <td><label for="Quantity_D">Quantity Needed: </label></td>
                                <td><input id="Quantity_D" name="Quantity_D" type="text" value="0"/></td>
                            </tr>
                            <tr>                                
                                <td><label for="Name_D">Agent Name: </label></td>
                                <td><input id="Name_D" name="Name_D" type="text" class="NameVal"/></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td><p id="Name_D_check" class="nameError"></p></td>
                            </tr>
                            <tr>    
                                <td><label for="Contact_D">Agent Contact: </label></td>                            
                                <td><input id="Contact_D" name="Contact_D" type="text" /></td>
                            </tr>
                         </table>
                        </fieldset>  
                    </div>
                    
                    <!--Start Signs on Right Column-->
                    <div class="rightColumnSigns">                                                          
                      <fieldset>                                                    
                            <img src="Images/Tucker_Decal.jpg" alt="Tucker Decals" />                            
                            <p>Decals with Reflective Price: $6.32/each <br />(minimum quanity of 10)</p>
                            <hr />
                      <p>Set 1</p>
                            <table>
                            <tr>
                                <td><label for="Quantity_RA">Quantity Needed: </label></td>
                                <td><input id="Quantity_RA" name="Quantity_RA" type="text" value="0"/></td>
                            </tr>
                            <tr>
                                <td><label for="Name_RA">Agent Name: </label></td>
                                <td><input id="Name_RA" name="Name_RA" type="text" class="NameVal"/></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td><p id="Name_RA_check" class="nameError"></p></td>
                            </tr>
                            <tr>
                                <td><label for="Contact_RA">Agent Contact: </label></td>                            
                                <td><input id="Contact_RA" name="Contact_RA" type="text" /></td>
                            </tr>
                            </table>
                            
                            <hr />                            
                      <p>Set 2</p>
                            <table>
                            <tr>
                                <td><label for="Quantity_RB">Quantity Needed: </label></td>
                                <td><input id="Quantity_RB" name="Quantity_RB" type="text" value="0"/></td>
                            </tr>
                            <tr>    
                                <td><label for="Name_RB">Agent Name: </label></td>
                                <td><input id="Name_RB" name="Name_RB" type="text" class="NameVal"/></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td><p id="Name_RB_check" class="nameError"></p></td>
                            </tr>
                            <tr>    
                                <td><label for="Contact_RB">Agent Contact: </label></td>                            
                                <td><input id="Contact_RB" name="Contact_RB" type="text" /></td>
                            </tr>    
                            </table>
                            <hr />
                      <p>Set 3</p>
                            <table>
                            <tr>                                
                                <td><label for="Quantity_RC">Quantity Needed: </label></td>
                                <td><input id="Quantity_RC" name="Quantity_RC" type="text" value="0"/></td>
                            </tr>
                            <tr>    
                                <td><label for="Name_RC">Agent Name: </label></td>
                                <td><input id="Name_RC" name="Name_RC" type="text" class="NameVal"/></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td><p id="Name_RC_check" class="nameError"></p></td>
                            </tr>
                            <tr>    
                                <td><label for="Contact_RC">Agent Contact: </label></td>                            
                                <td><input id="Contact_RC" name="Contact_RC" type="text" /></td>
                            </tr>
                            </table>
                            <hr />
                        <p>Set 4</p>
                          <table>
                            <tr>    
                                <td><label for="Quantity_RD">Quantity Needed: </label></td>
                                <td><input id="Quantity_RD" name="Quantity_RD" type="text" value="0"/></td>
                            </tr>
                            <tr>    
                                <td><label for="Name_RD">Agent Name: </label></td>
                                <td><input id="Name_RD" name="Name_RD" type="text" class="NameVal"/></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td><p id="Name_RD_check" class="nameError"></p></td>
                            </tr>
                            <tr>    
                                <td><label for="Contact_RD">Agent Contact: </label></td>                            
                                <td><input id="Contact_RD" name="Contact_RD" type="text" /></td>
                            </tr>
                          </table>                            
                        </fieldset>                                                                                                                  
                        
                        <button type="submit" name="decals" value="decals"
                            style="height: 50px; width: 135px; margin-left: -425px;">Submit Decals Order</button>                       
                    </div>                                        
                    <div class="spacer"></div>                    
                </fieldset>      
            </form>
    </div>
</body>
</html>

Open in new window

Author

Commented:
That is crazy!
 
I went through your code to try to understand how you accomplished this. Correct if I'm wrong, you added class names 'NameVal' and 'nameError' to the html.

Then you wrote the function validateNoEmail() based on which input field the user is focused on to validate no e-mails. However, I'm not going to pretend I understand this function. Yet.

Thank you for all of your help. That is nothing short of amazing.

Author

Commented:
Outstanding!
Greg AlexanderLead Developer

Commented:
I am glad I could help! Yes, you are correct, instead of using ids I used classes so and instead of calling a specific id each time, when the element is blured then you can begin to use $(this) which now switches to the element dynamically....... I am not doing a very good job of explaining lol... I think you can figure the rest out.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial