Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

05 HTML Form Validation

Uploaded by

zoom1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

05 HTML Form Validation

Uploaded by

zoom1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Form validation

Form validation used to occur at the server, after the client had
entered all necessary data and then pressed the Submit button. If
some of the data that had been entered by the client had been in
the wrong form or was simply missing, the server would have to
send all the data back to the client and request that the form be
resubmitted with correct information. This was really a lengthy
process and over burdening server.

Java Script provides a way to validate form's data on the client's


computer before sending it to the web server. Form validation
generally performs two functions.

 Basic Validation - First of all, the form must be checked to


make sure data was entered into each form field that
required it. This would need just loop through each field in
the form and check for data.

 Data Format Validation - Secondly, the data that is


entered must be checked for correct form and value. This
would need to put more logic to test correctness of data.

We will take an example to understand the process of validation.


Here is the simple form to proceed:

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2"
border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose
yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"
/></td>
</tr>
</table>
</form>
</body>
</html>

Basic Form Validation:

First we will show how to do a basic form validation. In the above


form we are calling validate()function to validate data
when onsubmit event is occurring. Following is the
implementation of this validate() function:

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5
)
{
alert( "Please provide a zip in the format
#####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
Data Format Validation:

Now we will see how we can validate our entered form data
before submitting it to the web server.

This example shows how to validate an entered email address


which means email address must contain at least an @ sign and a
dot (.). Also, the @ must not be the first character of the email
address, and the last dot must at least be one character after the
@ sign:

<script type="text/javascript">
<!--
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>

HTML: HTML5 Form Validation Examples

The option of using pure HTML (sometimes with a dab of CSS) to


complement JavaScript form validation was until recently
unthinkable. Sure there have been all kinds of whacky JavaScript
plug-ins over the years aimed at achieving something similar, but
never a single standard that we could work towards.
For a more detailed introduction to HTML5 form validation you
can find some great articles linked under References below. In
this article we intend to present only a number of simple
examples to get you started, covering basic form element types.

Before you ask, and someone always does, these examples will
currently work only in the following browsers: Safari 5, Chrome 6,
Opera 9, Firefox 4 Beta and the iPhone/iPad. Also each browser
has a slightly different default behaviour.

1. The 'required' attribute

The simplest change you can make to your forms is to mark a text
input field as 'required':

Your Name: <input type="text" name="name" required>

Your Name:
This informs the (HTML5-aware) web browser that the field is to
be considered mandatory. Different browsers may mark the input
box in some way (Firefox 4 Beta adds a red box-shadow by
default), display a warning (Opera) or even prevent the form from
being submitted if this field has no value. Hopefully these
behaviours will converge in future releases.

We have actually created our own valid/invalid formatting using


CSS to override the browser default, but more on that later. That's
why you may see something like the following in the example
above:

Before you type anything into the box a red marker is shown. As
soon as a single character has been entered this changes to a
green marker to indicate that the input is 'valid'.
Using CSS you can place markers inside or alongside the input
box, or simply use background colours and borders as some
browsers do by default.

The required attribute can also be applied to checkboxes when


you want them to be mandatory.

2. Different INPUT types

This is where HTML5 really gets interesting and more useful.


Along with the text input type, there are now a host of other
options, including email, url, number, tel, date and many others.

On the iPhone/iPad the different input types are associated with


different keyboards, making it easier for people to complete your
online forms. In other web browsers they can be used in
combination with the required attribute to limit or give advice on
allowable input values.

INPUT type="email"

By changing the input type to email while also using


the required attribute, the browser can be used to validate (in a
limited fashion) email addresses:

Email Address: <input type="email" name="email" required

placeholder="Enter a valid email address">

Note that for this example we've made use of another HTML5
attribute placeholder which lets us display a prompt or
instructions inside the field - something that previously had to be
implemented using messy onfocus and onblur JavaScript events.

The above code displays an input box as follows:

Email Address:
Again, different browsers implement this differently. In Opera it's
sufficient to enter just *@* for the input to be accepted. In Safari,
Chrome and Firefox you need to enter at least *@-.-. Obviously
neither example is very limiting, but it will prevent people from
entering completely wrong values, such as phone number, strings
with multiple '@'s or spaces.

Here is how it appears in Safari (with our CSS formatting to show


the (in)valid state):

INPUT type="url"

In a similar fashion to the email input type above, this one is


designed to accept only properly-formatted URLs. Of course it
currently does nothing of the kind, but later you will see how to
improve it's behaviour using the pattern attribute.

Website: <input type="url" name="website" required>

Again, the input box appears as normal:

Website:
This time the minimum requirement for most browsers is one or
more letters followed by a colon. Again, not very helpful, but it
will stop people trying to input their email address or other such
nonsense.

As mentioned above, we can improve on this by making use of


the pattern attribute which accepts a JavaScript regular
expression. So the code above becomes:
Website: <input type="url" name="website" required

pattern="https?://.+">

Now our input box will only accept text starting


with http:// or https:// and at least one additional character:

Website: starting with http


If you're not yet familiar with regular expressions, you really
should make it a priority to learn. For those already familiar, note
that the ^ and $ are already implicit so the input has to match
the entire expression. Pattern modifiers are not supported.

If anyone wants to contribute a more thorough expression to test


for valid email or url format, feel free to post it using
the Feedback form.

INPUT type="number" and type="range"

The number and range input types also accept parameters


for min, max and step. In most cases you can leave out step as it
defaults to 1.

Here you see an example including both a number input, typically


displayed as a 'roller' and a range input displayed as a 'slider':

Age: <input type="number" size="6" name="age" min="18"

max="99" value="21"><br>

Satisfaction: <input type="range" size="2"

name="satisfaction" min="1" max="5" value="3">


As with other HTML5 input types, browsers that don't recognize
the new options will default to simple text inputs. For that reason
it's a good idea to include a size for the input box.

Age Satisfaction (1-5)


The slider option is a bit bizarre in that no values are displayed,
but may be useful for more 'analog' inputs. There are some bugs
with the number input in that if you don't set a max value,
clicking 'down' with the input blank will result in a very large
number.

Here is how the two inputs are displayed in Safari:

and in Opera:

They are currently not supported in Firefox 4 Beta.

If you want to restrict the input of a text field to numbers without


having the up/down arrows associated with the input box, you can
always just set the input type to text and use a pattern of "\d+"
(one or more numbers).

INPUT type="password"

We have a separate article with details on validating passwords


using HTML5, including JavaScript code for customising the
browser generated alert messages.

3. Other HTML5 INPUT types

Other HTML5 input types include:


 color
 date
 datetime
 datetime-local
 month
 search
 tel
 time
 week

The search input will, in some browsers, change the styles to


match the browser or operating system default search field
format. You can see this demonstrated in the Search input above.

The tel input type is handy for the iPhone as it selects a different
input keyboard. There is no pattern-matching set by default so
you would have to implement that yourself using
the pattern attribute to accept only certain characters.

The color input is meant to let you select a hex-code from a


colour wheel - or similar - but as yet doesn't appear to have been
implemented in the wild.

The other date- and time-related options do have an effect at


least in Opera, with pop-up calendars and other devices
appearing to assist with input. While it would be great to see
something like this in every browser, for now you probably need
to stick with the ubiquitous JavaScript plugins.

You might also like