111

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.
01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en_GB">
<head>
<title>Form Validation < JavaScript | The Art of Web</title>
<meta name="description" content="Validation of form elements using JavaScript. Examples for

different form elements including: text input, checkbox, combo box, radio buttons and checkbox arrays.
Restricting text input to alphanumeric characters and spaces. How to use selectedIndex.">
<meta name="keywords" content="javascript, validation, form, select, validate, check, array,

alphanumeric, value, field, input, checkbox, using, checkform, function, script, alert, java, empty, with">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Chirp Internet">
<link rel="stylesheet" type="text/css"

href="http://resources.chirp.com.au/form_formatting.css+table_formatting.css.pagespeed.cc.Er27ofun
US.css">
<link rel="stylesheet" type="text/css" href="http://www.the-art-of-

web.com/style.css.pagespeed.ce.eAQAtInfns.css">
<style type="text/css"
media="print">#container{width:768px}body{margin:0;border:none;width:768px;font-
size:12px}#content{width:728px}.noprint{display:none}</style>
<script type="text/javascript">if(self!
=top)top.location.href=self.location.href;window.onload=function()
{buildMenu('submenu','h2',false);}</script>
<link rel="alternate" type="application/rss+xml" title="RSS"

href="http://search.twitter.com/search.atom?q=from%3Atheartofweb+%22New+Article%22">
</head>
<body>
<a class="chirplink" href="#content">skip navigation</a>
<table id="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="header">
<div id="menu" class="noprint">
<ul>
<li><a accesskey="1" href="/">Home</a></li>
<li><a accesskey="2" href="/html/">HTML</a></li>
<li><a accesskey="3" href="/css/">CSS</a></li>
<li><a accesskey="4" href="/javascript/">JavaScript</a></li>
<li><a accesskey="5" href="/php/">PHP</a></li>
<li><a accesskey="6" href="/sql/">SQL</a></li>
<li><a accesskey="7" href="/system/">System</a></li>
<li><a accesskey="8" href="/links/">Links</a></li>
<li><a accesskey="9" href="/javascript/preferences/">Preferences</a></li>
<li><a accesskey="8" href="/search.html">Search</a></li>
</ul>
</div>
</td>
<td class="noprint"><img src="http://www.the-art-of-

web.com/images/head_02.jpg.pagespeed.ce.uwJgs_f3rg.jpg" width="192" height="122" alt=""></td>
</tr>
<tr style="vertical-align: top;">
<td id="content">
<div class="noprint" style="margin: 0.5em 0;">
<script type="text/javascript">google_ad_client="pub-
9789897350102210";google_ad_slot="6258627248";google_ad_width=728;google_ad_height=90;</scri
pt>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div id="submenu" class="noprint">building menu...</div>
<h1>JavaScript: Form Validation</h1>
<p>Validating form input with JavaScript is easy to do and can save a
lot of unnecessary calls to the server as all processing is handled by
the web browser. It can prevent people from leaving fields blank, from
entering too little or too much or from using invalid characters.</p>
<p>For an alternative approach to client-side form validation, without
JavaScript, check out our new article on <a href="/html/html5-form-validation/">HTML5 Form

Validation</a> which is
available now in most modern browsers.</p>
<p><small><b>Note:</b> When the form input is important, it must always
be checked or re-checked by using a server-side script. Otherwise a
browser with JavaScript disabled, or a hacker trying to compromise your
site, can easily submit invalid data.</small></p>

<h2>Restricting input to alphanumeric characters</h2>
<script type="text/javascript">function checkForm(form)
{if(form.input.value==""){alert("Error: Input is empty!");form.input.focus();return false;}
var re=/^[\w ]+$/;if(!re.test(form.input.value)){alert("Error: Input contains invalid

characters!");form.input.focus();return false;}
alert("Input is valid: "+form.input.value);return false;}</script>
<p>In the following example, the single input box, named <tt>input</tt>,
must: a) not be empty; and b) contain only alphanumeric characters and
spaces. Only if both tests are passed can the form be submitted.</p>
<code><script type="text/javascript">
function checkForm(form)
// validation fails if the input is blank
if(form.<i>inputfield</i>.value == '') {
alert("Error: Input is empty!");
form.<i>inputfield</i>.focus();
<span> return false;</span>
// regular expression to match only alphanumeric characters and spaces
var re = /^[\w ]+$/;

// validation fails if the input doesn't match our regular expression
if(!re.test(form.<i>inputfield</i>.value)) {
alert("Error: Input contains invalid characters!");
form.<i>inputfield</i>.focus();
<span> return false;</span>
// validation was successful
<span> return true;</span>
</script>
</code>
<p><small><b>Note:</b> The pre-defined class <tt>\w</tt> represents any
alphanumeric character as well as the '_' character.</small></p>
<p>The regular expression <tt>^[\w ]+$</tt> will fail if the input is
empty as it requires at least one character (because we used <tt>+</tt>
instead of <tt>*</tt>). The first test in the example is therefore only
necessary in order to provide a different error message when the input
is blank.</p>
<p>The purpose of a form validation script is to return a boolean value

(<tt>true</tt> or <tt>false</tt>) to the onSubmit event handler. A
value of <tt>true</tt> means that form will be submitted while a
<tt>false</tt> value will block the form from being submitting. The
<tt>focus()</tt> command is used to set the focus to the problem element.</p>
<p>You can test the above script with different input values using this
form:</p>
<form method="post" action="/javascript/validate/" onsubmit="return checkForm(this);">
<fieldset>
Input: <input type="text" size="32" name="input" value="" maxlength="32">
<input type="submit">
</fieldset>
</form>
<p>The form is put together as follows:</p>
<code><form method="POST" action="<i>action</i>"

onSubmit="<span>return</span> checkForm(this);">
Input: <input type="text" size="32" name="<i>input</i>">

</form>
</code>
<p>The <tt>name</tt> attribute of the input field is used to reference
that field from within the <tt>checkForm</tt> function. With the advent
of <a href="http://www.google.com/search?q=define:DHTML" target="_blank">DHTML</a> it's
tempting to use <tt>id</tt>'s to
reference form fields, but that can lead to namespace conflicts and why
make things more complicated than necessary.</p>
<p>When the form is submitted - either by hitting Enter or clicking on
the Submit button - the <tt>onSubmit</tt> handler is triggered. This
then calls our <tt>checkForm()</tt> function, passing a reference to
itself (the form) as the only variable. This makes the value of the
input box available within the function as <tt>form.input.value</tt>
(the 'value' of the field called 'input' belonging to the form). Other
form values are available using a similar syntax, although this becomes
more complicated if you're using SELECT lists, checkboxes or radio
buttons (see below for examples).</p>
<p>The <tt>checkForm</tt> function tests the form input against our
conditions, returning a value of <tt>true</tt> if the form is to be
submitted (when all tests have been passed) or <tt>false</tt> to abort
(cancel) the form submission. It's that simple.</p>
<p>In a real-life situation you will most likely have more fields to
check, and more complicated conditions, but the principle remains the
same. All you need to do is extend the <tt>checkForm</tt> function to
encompass the new fields and conditions:</p>
<code> function checkForm(form)

{
if(!<i>condition1</i>) {
alert("Error: <i>error message</i>");
form.<i>fieldname</i>.focus();
return false;
if(!<i>condition2</i>) {
alert("Error: <i>error message</i>");
form.<i>fieldname</i>.focus();
return false;
...
return true;
}</code>
<p>When a <tt>return</tt> command is encountered, execution of the
function is halted. In other words if the first condition fails, the
second condition will not be tested and so forth. Only when <b>all</b>
conditions have been satisfied do we reach the <tt>return true</tt>
command, in which case the form will be submitted.</p>
<p>You'll see that the all validation scripts presented on this and
subsequent pages adhere to the same basic format.</p>

<h2>Working with different types of FORM elements</h2>
<h3>Text/Textarea/Password boxes</h3>
<p>The value of a text input box (or a textarea or password input) is
available using the syntax <tt>form.fieldname.value</tt>. This is
<b>not</b> the case for other input types.</p>
<code>form.<i>fieldname</i>.value</code>
<p>To check whether two inputs have the same is quite simple:</p>
<code>if(form.<i>field1</i>.value == form.<i>field2</i>.value) {
// values are identical
}</code>
<p><small><b>Note:</b> Make sure to always use <tt>==</tt> for
comparisons. If you use <tt>=</tt> (the assignment operator) instead
then it can take a long time to debug.</small></p>
<p>and to see if they have different values we just reverse the logic:</p>
<code>if(form.<i>field1</i>.value != form.<i>field2</i>.value) {
// values are different
}</code>
<p>If you want to test numeric values (or add or subtract them) then you
first have to convert them from strings to numbers. By default all form
values are available as strings only.</p>
<code> var field1 = <a

href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Predefined_Functions:parseInt
_and_parseFloat_Functions" target="_blank">parseInt</a>(form.field1.value);
var field2 = parseInt(form.field2.value);
if(field1 > field2) {
// field1 as a number is greater than field2 as a number
}</code>
<p><small><b>Note:</b> <tt>parseFloat</tt> is the same as
<tt>parseInt</tt> except that it works for floating point
numbers as well as integers.</small></p>
<h3>Select/Combo/Drop-down boxes</h3>
<p>The value of a SELECT input element is accessed using:</p>
<code>var selectBox = form.<i>fieldname</i>;
selectBox.options[selectBox.selectedIndex].value
selectBox.options[selectBox.selectedIndex].text</code>
<p>where <tt>fieldname</tt> is the SELECT element, which has an array of

<tt>options</tt> and a value <tt>selectedIndex</tt> that tells you which
option has been selected. The illustration below shows this
relationship:</p>
<p style="text-align: center;"><img src="http://www.the-art-of-

web.com/images/selectbox.jpg.pagespeed.ce.fepozA8-WZ.jpg" width="239" height="205" alt=""></p>
<p>Note that the 'I' in selectedIndex needs to be capitalised -
JavaScript functions and variables are <b>always</b> case-sensitive.</p>
<p>If you define a <tt>value</tt> for the OPTION elements in your SELECT
list, then <tt>.value</tt> will return that, while <tt>.text</tt> will
return the text that is visible in the browser. Here's an example of
what this refers to:</p>
<code> <option value="<i>value</i>"><i>text</i></option></code>
<p><small><b>Note:</b> One of the most common problems for novices is that
Internet Explorer allows you to access the value of the selected option
using the same format as for text boxes above. This is wrong!</small></p>
<p>If you just want to check that an option has been chosen (ie. that
the SELECT box is no longer in it's default state) then you can use:</p>
<code> if(form.<i>fieldname</i>.selectedIndex > 0) {
// an option has been selected

} else {
// no option selected
</code>
<h3>Checkboxes</h3>
<p>These really are simple:</p>
<code>form.<i>checkboxfield</i>.checked</code>
<p>will return a <a href="http://www.google.com/search?q=define:boolean"

target="_blank">boolean</a> value (true or false) indicating whether the
checkbox is in a 'checked' state.</p>
if(form.<i>checkboxfield</i>.checked) {
alert("The checkbox IS checked");
} else {
alert("The checkbox IS NOT checked");
return false;
</code>
<p><small><b>Note:</b> You don't need to test using
<tt>form.checkboxfield.checked == true</tt> as the value is already
boolean.</small></p>
<script type="text/javascript">function checkForm2(form)
{if(form.checkboxfield.checked){alert("The checkbox IS checked");}else{alert("The checkbox IS NOT

checked");}
return false;}</script>
<form method="POST" action="/javascript/validate/" onsubmit="return checkForm2(this);">
<fieldset>
<input type="checkbox" name="checkboxfield"> Check me! <input type="submit">
</fieldset>
</form>
<h3>Radio buttons</h3>
<p>Radio buttons are implemented as if they were an array of checkboxes.
To find out which value (if any) has been selected, you need to loop
through the array until you find which one has been selected:</p>
<code class="final"> function checkRadio(field)
for(var i=0; i < field.length; i++) {
if(field[i].checked) return field[i].value;
}
return false;
}</code>
<p>The form handler function is then the following:</p>
if(radioValue = checkRadio(form.<i>radiofield</i>)) {
alert("You selected " + radioValue);
return true;
} else {
alert("Error: No value was selected!");
return false;
}</code>
<script type="text/javascript">function checkRadio(field)
{for(var i=0;i<field.length;i++){if(field[i].checked)return field[i].value;}
return false;}
function checkForm3(form)
{if(radioValue=checkRadio(form.radiofield)){alert("You selected "+radioValue);}else{alert("Error: No

value was selected!");}
<form method="POST" action="/javascript/validate/" onsubmit="return checkForm3(this);">
<fieldset>
<input type="radio" name="radiofield" value="Red"> Red
<input type="radio" name="radiofield" value="Green"> Green
<input type="radio" name="radiofield" value="Blue"> Blue
</fieldset>
</form>
<h2>Checkbox arrays</h2>
<p>If you're working with arrays of checkboxes to submit data to a
server-side script then you might already have some grey hairs from
trying to figure out how to validate the input using JavaScript.</p>
<p>The problem is that, to have the data submitted in a 'nice' format to
the server, the <tt>name</tt> attributes of all the checkboxes in the
array are often set to the same value: a name ending with <tt>[]</tt>.
This makes it difficult to address them directly using JavaScript.</p>
<p>In this example, the checkboxes are defined as:</p>
<code><input type="checkbox" name="<i>pref[]</i>"

value="<i>value</i>"> <i>label</i></code>
<script type="text/javascript">function checkArray(form,arrayName)

{var retval=new Array();for(var i=0;i<form.elements.length;i++){var
el=form.elements[i];if(el.type=="checkbox"&&el.name==arrayName&&el.checked)
{retval.push(el.value);}}
return retval;}
function checkForm4(form)
{var itemsChecked=checkArray(form,"pref[]");alert("You selected "+itemsChecked.length+"

items");if(itemsChecked.length>0){alert("The items selected were:\n\t"+itemsChecked);}
<form method="post" action="/javascript/validate/" onsubmit="return checkForm4(this);">
<fieldset>
<legend>Example: checkbox array</legend>
<p>Which of the following pastimes do you enjoy?</p>
<p><input type="checkbox" name="pref[]" value="Art /Antiques"> Art /Antiques<br>
<input type="checkbox" name="pref[]" value="Camping/Hiking"> Camping/Hiking<br>
<input type="checkbox" name="pref[]" value="Cooking"> Cooking<br>
<input type="checkbox" name="pref[]" value="Computer games"> Computer games<br>
<input type="checkbox" name="pref[]" value="Dining Out"> Dining Out<br>
<input type="checkbox" name="pref[]" value="Fishing"> Fishing<br>
<input type="checkbox" name="pref[]" value="Gardening"> Gardening<br>
<input type="checkbox" name="pref[]" value="Going to Pubs/Clubs"> Going to Pubs/Clubs<br>
<input type="checkbox" name="pref[]" value="Internet/Computers"> Internet/Computers<br>
<input type="checkbox" name="pref[]" value="Music"> Music<br>
<input type="checkbox" name="pref[]" value="Photography"> Photography<br>
<input type="checkbox" name="pref[]" value="Reading"> Reading<br>
<input type="checkbox" name="pref[]" value="Television/Videos"> Television/Videos<br>
<input type="checkbox" name="pref[]" value="Theatre/Cinema"> Theatre/Cinema<br>

<input type="checkbox" name="pref[]" value="Sports/Fitness"> Sports/Fitness</p>
<p><input type="submit"></p>
</fieldset>
</form>
<p>When you submit the form you will be notified through an alert
message how many items you checked, and what they were. This is
calculated using a new function:</p>
<code class="final"> // Original JavaScript code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
function checkArray(form, arrayName)
var retval = new Array();
for(var i=0; i < form.elements.length; i++) {
var el = form.elements[i];
if(el.type == "checkbox" && el.name == arrayName && el.checked) {
retval.push(el.value);
return retval;
</code>
<p>The form handler that calls this function and displays the alerts is
as follows:</p>
var itemsChecked = checkArray(form, "<i>pref[]</i>");
alert("You selected " + itemsChecked.length + " items");
if(itemsChecked.length > 0) {
alert("The items selected were:\n\t" + itemsChecked);
return false;
</code>
<p>The <tt>checkArray</tt> function returns an array contains all the
select values.</p>
<p>Normally you would modify this so that you could submit or not submit
the form based on the number of items selected. For example "at
least two" or "no more than five". This should be a
simple exercise.</p>
<h2>Combining Form Elements in Conditions</h2>
<p>In more complicated forms you will want to set conditions on the form
that combine multiple elements. For example, a text input that only
needs to have a value if a checkbox is checked:</p>
<code>function checkForm(form)
...
if(form.<i>checkboxname</i>.checked && (form.<i>textinputname</i>.value == '')) {
alert('Error: <i>error message</i>');
form.<i>textinputname</i>.focus();
return false;
...
}</code>
<p>or conditions that vary according to a radio button selection:</p>
<code>function checkForm(form)
...
var radioValue = checkRadio(<i>radiofield</i>);
switch(radioValue)
{
case 'Red':
<i>conditions to apply if 'Red' is selected</i>
break;
case 'Blue':
<i>conditions to apply if 'Blue' is selected</i>
break;
default:
<i>conditions to apply in all other cases</i>
...
}</code>
<p>Using simple logical operators and the functions supplied above you
can do all sorts of client-side form validation. To take things a step
further you can even explore <a href="/javascript/ajax-validate/">Ajax
Form Validation</a> which lets you supply real-time feedback using
server-side scripts triggered by JavaScript events.</p>
<h2>Related Articles</h2>
<ul>
<li><b>JavaScript: Form Validation</b></li>
<li><a href="/javascript/validate/1/">JavaScript: Form Validation: Passwords</a></li>
<li><a href="/javascript/validate-date/">JavaScript: Form Validation: Date and Time</a></li>
<li><a href="/javascript/validate/3/">JavaScript: Form Validation: Credit Cards and Dates</a></li>
<li><a href="/html/html5-form-validation/">HTML: HTML5 Form Validation Examples</a></li>
</ul>
<h2>References</h2>
<ul>
<li><a
href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp"
target="_blank">Core JavaScript 1.5 Reference:Global Objects:RegExp</a></li>
<li><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array"
target="_blank">Core JavaScript 1.5 Reference:Global Objects:Array</a></li>
</ul>
<p class="noprint"><a href="/javascript/">< JavaScript</a></p>
<br style="clear: both;">
<div class="noprint">

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c878e016b60dae8"
class="addthis_button_compact">Share</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-

4c878e016b60dae8"></script>

</div>
<h2 id="user_comments">User Comments and Notes</h2>
<p style="font-size: 11px;">28 January 2009: nathan says:</p>
<p class="comment">Your highlighting of search terms is ANNOYING. The fact that you set a cookie with
it is ridiculous. I had to clear private data (firefox) to get rid of it. Please add a link to kill the highlighting,
or do something different so a page refresh can get rid of it.</p>
<div class="response"><p>It's not a cookie, but your cache, and you're welcome <img
src="data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/
+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCn
EMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+
2KGCoG4IZlmU2iQAAOw==" width="15" height="15" border="0" alt=""></p></div>
<br>
<p style="font-size: 11px;">27 August 2010: Mike Jeffree says:</p>
<p class="comment">Hi - Is it possible to have a checkbox, that has a default of checked, so that the
user HAS to enter info into the textarea. <br>
But if the user unchecks the box, the user DOESNT have to enter info in textarea. <br>
Any help would be most appreciated.</p>
<div class="response"><p>I've added some code for this in the section "Combining Form Elements
in Conditions" <img
src="data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/
+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCn
EMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+
2KGCoG4IZlmU2iQAAOw==" width="15" height="15" border="0" alt=""></p></div>
<br>
<p style="font-size: 11px;">27 October 2010: JackLloyd, says:</p>
<p class="comment">Very handy, everything else I found was rubbish but this gave me exactly what I
wanted with minor modification (removed '+' character) - needed to alert user if 'username' contained a
space /anywhere/ in the field. Hope the following tags help SEO..<br>
<br>
tags: Javascript field validation no spaces alert</p>
<br>
<h2 id="send_feedback">Send Feedback</h2>
<script type="text/javascript">function checkFeedbackForm(form)
{if(form.name.value==''){alert('Please enter your Name');form.name.focus();return false;}
if(form.email.value==''){alert('Please enter a valid Email address');form.email.focus();return false;}
if(form.message.value==''){alert('Please enter your comment or question');form.message.focus();return

false;}
if(!form.captcha.value.match(/^\d{5}$/)){alert('Please enter the CAPTCHA digits in the box

provided');form.captcha.focus();return false;}
return true;}</script>
<form method="POST" action="/feedback.html" onsubmit="return checkFeedbackForm(this);">
<input type="hidden" name="pageTitle" value="JavaScript: Form Validation">
<input type="hidden" name="pageURL" value="/javascript/validate/">
<fieldset>
<legend>Send Your Feedback</legend>
<label for="field_name">Name<strong>*</strong></label><span><input id="field_name" required

type="text" size="48" name="name" value=""></span>
<label for="field_email">Email Address<strong>*</strong></label><span><input id="field_email"
type="email" required size="48" name="email" value=""> <small>(will not be
published)</small></span>
<label for="field_website">Website</label><span><input onchange="if(this.value != '' && !

this.value.match(/^http/)) alert('Error - the website address needs to start with http');"
id="field_website" type="url" pattern="^http.*" size="48" name="website" value="">
<small>(optional)</small></span>
<label for="field_message">Message<strong>*</strong></label><span><textarea id="field_message"

name="message" required cols="48" rows="8"></textarea></span>
<span><img id="captcha" style="border: 1px outset #666;" src="/captcha.png" width="120" height="30"

border="1" alt="CAPTCHA">
<small><a href="#" onclick="
document.getElementById('captcha').src = '/captcha.png?' + Math.random();
document.getElementById('captcha_code').value = '';
return false;
">refresh</a></small></span>
<label><a href="/php/captcha/">CAPTCHA</a><strong>*</strong></label><span><input
id="captcha_code" type="text" required pattern="\d{5}" name="captcha" size="6" maxlength="5"
onkeyup="this.value = this.value.replace(/[^\d]+/g, '');"> <small><- copy the digits from the image into
this box</small></span>
<span><input type="submit" name="submit" value="Send Feedback"></span>
</fieldset>
</form>
</td>
<td id="rhs" class="noprint">
<p style="margin: 0;"><img src="http://www.the-art-of-

web.com/images/head_04.jpg.pagespeed.ce.dy1l3q3boW.jpg" width="146" height="302" alt=""></p>
<div class="noprint" style="margin: 2em 0;">

<script type="text/javascript">google_ad_client="pub-
9789897350102210";google_ad_slot="6614597854";google_ad_width=160;google_ad_height=600;</sc
ript>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="footer">
<div id="copyright"><a href="/copyright.html">© Copyright 2011</a> <a

href="http://www.chirp.com.au/" target="_blank">Chirp Internet</a>
- Page Last Modified: 27 October 2010</div>
</td>
</tr>
</table>
<div id="totop" class="noprint"><a href="#content">[top]</a></div>

<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-3458555-

1']);_gaq.push(['_trackPageview']);(function(){var
ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document
.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();</script>


<script type="text/javascript" src="http://www.the-art-of-
web.com/buildmenu.js.pagespeed.jm.o4MxX7hWAg.js"></script>

</body>
</html>

111

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

111

Hochgeladen von

Copyright:

Verfügbare Formate

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

<title>Form Validation &lt; JavaScript | The Art of Web</title>

<meta name="description" content="Validation of form elements using JavaScript. Examples for

<meta name="keywords" content="javascript, validation, form, select, validate, check, array,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="author" content="Chirp Internet">

<link rel="stylesheet" type="text/css"

<link rel="stylesheet" type="text/css" href="http://www.the-art-of-

<link rel="alternate" type="application/rss+xml" title="RSS"

<table id="container" border="0" cellpadding="0" cellspacing="0">

<div id="menu" class="noprint">

<li><a accesskey="1" href="/">Home</a></li>

<li><a accesskey="2" href="/html/">HTML</a></li>

<li><a accesskey="3" href="/css/">CSS</a></li>

<li><a accesskey="4" href="/javascript/">JavaScript</a></li>

<li><a accesskey="5" href="/php/">PHP</a></li>

<li><a accesskey="6" href="/sql/">SQL</a></li>

<li><a accesskey="7" href="/system/">System</a></li>

<li><a accesskey="8" href="/links/">Links</a></li>

<li><a accesskey="9" href="/javascript/preferences/">Preferences</a></li>

<li><a accesskey="8" href="/search.html">Search</a></li>

<td class="noprint"><img src="http://www.the-art-of-

<tr style="vertical-align: top;">

<div id="submenu" class="noprint">building menu...</div>

<h1>JavaScript: Form Validation</h1>

<p>Validating form input with JavaScript is easy to do and can save a

lot of unnecessary calls to the server as all processing is handled by

entering too little or too much or from using invalid characters.</p>

<p>For an alternative approach to client-side form validation, without

JavaScript, check out our new article on <a href="/html/html5-form-validation/">HTML5 Form

available now in most modern browsers.</p>

<p><small><b>Note:</b> When the form input is important, it must always

be checked or re-checked by using a server-side script. Otherwise a

browser with JavaScript disabled, or a hacker trying to compromise your

site, can easily submit invalid data.</small></p>

<script type="text/javascript">function checkForm(form)

{if(form.input.value==""){alert("Error: Input is empty!");form.input.focus();return false;}

var re=/^[\w ]+$/;if(!re.test(form.input.value)){alert("Error: Input contains invalid

alert("Input is valid: "+form.input.value);return false;}</script>

must: a) not be empty; and b) contain only alphanumeric characters and

// validation fails if the input is blank

alert(&quot;Error: Input is empty!&quot;);

<span> return false;</span>

// regular expression to match only alphanumeric characters and spaces

var re = /^[\w ]+$/;

alert(&quot;Error: Input contains invalid characters!&quot;);

<span> return false;</span>

// validation was successful

<span> return true;</span>

<p><small><b>Note:</b> The pre-defined class <tt>\w</tt> represents any

alphanumeric character as well as the '_' character.</small></p>

<p>The regular expression <tt>^[\w ]+$</tt> will fail if the input is

empty as it requires at least one character (because we used <tt>+</tt>

instead of <tt>*</tt>). The first test in the example is therefore only

necessary in order to provide a different error message when the input

<p>The purpose of a form validation script is to return a boolean value

value of <tt>true</tt> means that form will be submitted while a

<tt>focus()</tt> command is used to set the focus to the problem element.</p>

<form method="post" action="/javascript/validate/" onsubmit="return checkForm(this);">

Input: <input type="text" size="32" name="input" value="" maxlength="32">

<p>The form is put together as follows:</p>

<code>&lt;form method=&quot;POST&quot; action=&quot;<i>action</i>&quot;

Input: &lt;input type=&quot;text&quot; size=&quot;32&quot; name=&quot;<i>input</i>&quot;&gt;

<p>The <tt>name</tt> attribute of the input field is used to reference

<title>Form Validation < JavaScript | The Art of Web</title>

alert("Error: Input is empty!");

alert("Error: Input contains invalid characters!");

<code><form method="POST" action="<i>action</i>"

Input: <input type="text" size="32" name="<i>input</i>">

<code> <option value="<i>value</i>"><i>text</i></option></code>

alert("The checkbox IS checked");

alert("The checkbox IS NOT checked");

for(var i=0; i < field.length; i++) {

alert("You selected " + radioValue);

alert("Error: No value was selected!");