January 24, 2000 - Form Validation

January 24, 2000
Form Validation

Tips: January 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Suppose you have a Web site that solicits applicants to send their resume to you. But you really don't want to read thousands of high school kids' resumes. You want to check the age field before submitting it. Here's a form that let's you do that:

Your age:

Desired Job:

Resume:

<br/><input type="submit" value="Send Resume" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /></form>
Here is the code that generates the form above:
<pre><code><font color="#000066"><HTML>
<HEAD>
</HEAD>
<BODY></font>
<font color="#660000"><SCRIPT LANGUAGE=<font color="#0000cc">"JavaScript"</font>></font>
<font color="#777777"><i></i></font>
<font color="#660000"></SCRIPT></font>
<font color="#000066"><FORM METHOD=<font color="#0000cc">"POST"</font>
      ACTION=<font color="#0000cc">"mailto:you@yourdomain.com"</font>
      ENCTYPE=<font color="#0000cc">"text/plain"</font>
      onSubmit=<font color="#0000cc">"return valid(this)"</font>></font>
Your age:<font color="#000066"><BR><INPUT TYPE=<font color="#0000cc">"text"</font> NAME=<font color="#0000cc">"age"</font> SIZE=<font color="#0000cc">"2"</font>><BR></font>
Desired Job:<font color="#000066"><BR><INPUT TYPE=<font color="#0000cc">"text"</font> NAME=<font color="#0000cc">"job"</font> SIZE=<font color="#0000cc">"40"</font>><BR></font>
Resume:<font color="#000066"><BR><TEXTAREA NAME=<font color="#0000cc">"resume"</font> COLS=<font color="#0000cc">"40"</font> ROWS=<font color="#0000cc">"5"</font>></TEXTAREA><BR>
<INPUT TYPE=<font color="#0000cc">"submit"</font> VALUE=<font color="#0000cc">"Send Resume"</font>>
</FORM>
</BODY>
</HTML></font></code></pre><p>
<font face="Arial,Helvetica,Verdana" size="2"><p align="CENTER"></p></font>
</p>                
                </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/indexa235.html?wsn=www.webreference.com&wpu=/js/tips/000124.html&lurl=https://o1.qnsr.com/cgi/r?WT.qs_dlk=WkaTeArIZ78AAHFbYwIAAAAR%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="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>