Regular Expressions: A Feedback Form - Doc JavaScript

JavaScript Regular Expressions

A Feedback Form

In this section we'll show you how to create a feeback form that checks if the user's e-mail address' syntax is valid. We'll first provide the script, and then explain it in depth. The final result looks like this:

Your e-mail address:

Subject:

Comments:

<br/><input type="submit" value="Send Mail" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /></form>
<p>Enter a string in the "e-mail" field, and submit the form. If your string is a valid e-mail address, the script accepts it (and would submit the form, but this is just a demo). If the string is not a valid e-mail address, a message is displayed and the field is highlighted for easy correction. Note that this specific form does not send me an e-mail, because it's just a demo! Here's the code for this form and its corresponding script:</p>
<p>If you're using a browser that doesn't support regular expressions, you'll get an immediate error. In the <a href="workaround.html">following section</a> we'll show you how to solve this problem.</p>
<p> </p><pre><code><font color="#0000cc"><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM METHOD="POST"
      ACTION="mailto:you@yourdomain.com"
      ENCTYPE="text/plain"
      onSubmit="</font><font color="#cc0000">return valid(this)</font><font color="#0000cc">">
Your e-mail address:<BR><INPUT TYPE="text" NAME="</font><font color="#cc0000">email</font><font color="#0000cc">" SIZE="40"><BR>
Subject:<BR><INPUT TYPE="text" NAME="subject" SIZE="40"><BR>
Comments:<BR><TEXTAREA NAME="comments" COLS="40" ROWS="5"></TEXTAREA><BR>
<INPUT TYPE="submit" VALUE="Send Mail">
</FORM></font></code></pre> 
<p>Take a look at the <code><font color="#0000cc"><FORM></font></code> tag, which defines the form's main attributes. You should change the e-mail address to your own, so the user sends <strong>you</strong> an e-mail when he or she submits the form. The <code><font color="#0000cc">onSubmit</font></code> event handler provides the ability to cancel the submission if it returns <code><font color="#0000cc">false</font></code>. The statement <code><font color="#0000cc">return valid(this)</font></code> simply returns the value that is returned by the <code><font color="#0000cc">valid()</font></code> function. If the function returns <code><font color="#0000cc">false</font></code> (it does that when the user's e-mail address has an invalid syntax) the form's submission is cancelled. Otherwise, the submission proceeds. The term <code><font color="#0000cc">this</font></code> in the event handler refers to the form (it's actually a JavaScript object that reflects the form), so <code><font color="#0000cc">this.email</font></code>, for example, would refer to the field named "<code><font color="#0000cc">email</font></code>".</p>
<p>Now let's see how the function works, and what it does. First, it assigns the variable <code><font color="#0000cc">field</font></code> an object that reflects the e-mail address field. The value of this field is then assigned to the variable <code><font color="#0000cc">str</font></code>. The function then defines two regular expressions: <code><font color="#0000cc">reg1</font></code> and <code><font color="#0000cc">reg2</font></code>. The first one matches common <strong>in</strong>valid e-mail addresses, whereas the second one matches the general e-mail address syntax. By combining these two expressions (we negate the first one, of course) we achieve a relatively reliable e-mail verification mechanism.</p>
<p>The function utilizes a simple <code><font color="#0000cc">if</font></code> statement to check if the e-mail address' syntax is valid. If so, it displays a message and returns <code><font color="#0000cc">true</font></code>, so you (<code><font color="#0000cc">you@yourdomain.com</font></code>) receive the user's e-mail. Otherwise, an alert is displayed and the e-mail address field is highlighted, so the user can easily edit the address. The function then returns <code><font color="#0000cc">false</font></code>, cancelling the submission.</p>
<p>The first regular expression is very obvious, but the second one is a bit more difficult. It matches the basic syntax of an e-mail address, according to the following rules (in order of appearance):</p><ol><li>One or more characters before the "<code><font color="#0000cc">@</font></code>"</li><li>An optional "<code><font color="#0000cc">[</font></code>", because <code><font color="#0000cc">user@[255.255.255.0]</font></code> is a valid e-mail</li><li>A sequence of letters, numbers, and periods, which are all valid domain or IP address characters</li><li>A period followed by a 2-3 letter suffix</li><li>An optional "<code><font color="#0000cc">]</font></code>"</li></ol><p align="right"><a href="index-2.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="regular.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="modifiers.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="construct.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="rules.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="values.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="substitute.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="define.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="methods.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="backreferences.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="form.html"><img src="../bc.gif" height="18" width="18" border="0"/></a><a href="workaround.html"><img src="../gr.gif" height="18" width="18" border="0"/></a><a href="final.html"><img src="../gr.gif" height="18" width="18" border="0"/></a></p>
<p></p>
<center>
<p><a href="https://www.internet.com/" target="_top"><img src="../../img/URL.gif" border="0" width="161" height="18" alt="https://www.internet.com"/></a></p>
<p>     
</p><p><small>Created: October 23, 1997, 1997<br/>Revised: December 4, 1997<br/>URL: https://www.webreference.com/js/column5/form.html</small></p>
</center>                
                </div>
            <div id="right"><div class="image square quad" style='margin-bottom:20px;'>
    
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>
<div id="ssn_widget_container">
    <div id="ssn_widget_header">
        <h5><img border="0" align="absbottom" alt="Justtechjobs.com" src="https://images.justtechjobs.com/images/webreference.gif"/>Find a programming school near you</h5>
    </div>
    <div id="ssn_widget_content">
<form inert id="SSN" name="populate" action="https://www.webreference.com/school-search-results.html" method="get">
	 
	 <label>Zip Code:</label>
	  <input name="pc" type="text" maxlength="5" value="" style="display:block;float:left;" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
	 <br/><br/> 
	 <label>Subject:</label>
	  <select name="sub">
		<option value="all">- Select All Subjects -</option>
				<optgroup label="Computers and Technology">
		<option value="compapplications">Computer Applications</option>
		<option value="comeng">Computer Engineering</option>
		<option value="comscience">Computer Science</option>
		<option value="cnp" selected="selected">Computer Prog. - Software Dev.</option>
		<option value="gameprogramming">Computer Game Programming</option>
		<option value="webdesign">Web Design</option>
		<option value="webdevelopment">Web Development</option>
		<option value="internetsystems">Internet Systems</option>
        <option value="internetcertification">Internet Certification</option>
        <option value="databasedesign">Database Design and Development</option>
        <option value="infosystemsmgmt">Information Systems Management</option>
        <option value="itprojectmgmt">Information Technology Project Management</option>
		<option value="networkdesign">Network Design - Development</option>
        <option value="systemsanalyst">Systems Analyst</option>
	  </select>
	  <br/><br/>  
	  <label>Degree:</label>
	  <select name="qual">
	   <option value="all" selected="selected">- Select All Degrees -</option>
		<option value="associate">Associate's</option>
		<option value="bachelor">Bachelor's</option>
		<option value="master">Master's</option>
		<option value="doctoral">Doctoral</option>
		<option value="certificate">Certificates</option>
		<option value="diploma">Diplomas</option>
		<option value="coursework">Coursework</option>
		<option value="mba">MBA</option>
	  </select>
	<br style="clear:both;"/><br/>  
	 <input name="ct" type="radio" value="online"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Online
	  <input name="ct" type="radio" value="campus"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Campus
	  <input name="ct" type="radio" value="either" checked="checked" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Both
      
	  <br/><br/> 
	  <input type="submit" value="Submit"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />	
</form></div>
</div><div class="image square quad" style='margin-bottom:20px;'>
     
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>

<div class="articlecategorysummary">
    <iframe scrolling="no" frameborder="0" align="middle" src="https://webreference.com/sl/assetlisting/index6c18.html?wsn=www.webreference.com&wpu=/js/column5/form.html&lurl=https://o1.qnsr.com/cgi/r?WT.qs_dlk=WkaWIgrIZ78AAAPBIQkAAAAF%20domain=None;;n=203;c=1395323;s=9530;x=7936;f=201308291521150;u=j;z=TIMESTAMP;k=https://assetform.webreference.com/controller&wpos=AssetListing&lyt=l9&mcss=https://www.webreference.com/imageserver/b2btechleadform/webreference/styles/style_email.css&css=https://www.webreference.com/hqb2b/css/qmp/qmp_default.css&title=Top%20White%20Papers%20and%20Webcasts" name="inneriframe" id="inneriframe" height="820px" width="340px;"></iframe>
</div>

</script>
</div>

</div>
        <div class="clear"></div>
        <div id="footer">
        <div id="footer_content">
    <div id="quad_bottom"class="quad" align='center' style='margin-left:auto;margin-right:auto;width:720px;'>
        
<script language="JavaScript">
	var t=displayDFPTag("lb");
	document.write(t);

</script>
    </div>
    <div class="footer_listing">
         
    </div>
    <div class="footer_listing">
        <span class="list-header">WebReference</span>
        <ul>
            <li class="first"><a href="../tips/index.html">Tip Archive</a></li>
            <li><a href="../../about.html">About</a></li>
            <li><a href="../../sitemap.html">Sitemap</a></li>
            <li><a href="../../contact.html">Contact</a></li>
            <li><a href="../../accountManagement87fb.html%3FformType=registrationForm.html">Subscribe</a></li>
        </ul>

</div>
    <div class="footer_listing">
        <span class="list-header">Topics</span>
        <ul>
            <li class="first"><a href="https://webreference.com/authoring.html">Web Authoring</a></li>
            <li><a href="../../internet/index.html">The Internet and the Web</a></li>
            <li><a href="../../multimedia/index.html">Multimedia</a></li>
            <li><a href="https://webreference.com/programming.html">Web Programming</a></li>
            <li><a href="../../promotion/index.html">Website Promotion and Marketing</a></li>
            <li><a href="../../experts/index.html">Contributors</a></li>
        </ul>
    </div>
    <div class="footer_listing">
        <span class="list-header"><a href="https://www.developer.com/"><img src="../../img/dev.com_logo.png" alt="Developer.com"></a></span>
        <ul>
            <li class="first"><a href="../../terms.html">Terms Of Service</a></li>
            <li><a href="../../licensing.html">Licensing and Permissions</a></li>
            <li><a href="../../privacy.html">Privacy Policy</a></li>
            <li><a href="../../mediakit/index.html">Advertising</a></li>
            <li><a href="https://e-newsletters.developer.com/">Newsletters</a></li>
            
        </ul>
    </div>    <div class="footer_listing">
         
    </div>
    <div class="clear"></div>
    <div id="copyright">
        Copyright © 2017 QuinStreet Inc. All Rights Reserved.
    </div>
</div>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-48218803-1', 'auto');
    ga('send', 'pageview');

</script>

        </div>

<div id="ajax_alpha"></div>
		<div id="ajax_beta"></div>

</body>

</html>