JavaScript Form Validation

JavaScript Form Validation

 Before an HTML form is submitted, JavaScript can
be used to provide client-side data validation
 This is more user-friendly for the user than
server-side validation because it
does not require a server round
trip before giving feedback
 If the form is not valid, the form
is not submitted until the errors
are fixed
 Client-Side Validation
HTTP Request

HTTP Response

Web Browser Application Database

Web
Server Server
Server

JavaScript Application
Validation Validation

 JavaScript data validation happens before form is

submitted
 Server-side application validation happens after
the form is submitted to the application server
Client-Side vs Server-Side
 If creating a Web form, make sure the
data submitted is valid and in the correct
format
 Client-side validation gives the user
faster feedback
 If possible, allow for server-side
validation if the JavaScript is turned off
 Covered in future INFO courses
What to Validate on a Form?
 Form data that typically are checked by a
JavaScript could be:
 were required fields left empty?
 was a valid e-mail address entered?
 was a valid date entered?
 was text entered in a numeric field?
 were numbers entered in an text field?
 did the number entered have a correct range?
Validation Functions
 Validation functions can usually be written in either of two ways
 traditional iterative programming methodologies
 write a small program (function) that iterates through the user input
and validates the data type and returns true or false depending on
result
 requires Javascript level iterative processing
 can be relatively slow, especially if form has many fields to be validated
 pattern matching (via regular expressions, supported in Javascript
1.2 as in Perl 5)
 create a regular expression pattern for the data type and let the system
validate the user input via the pattern matching capabilities of the
 pattern matching is done at a low level in the Javascript processor, so
validation is very quick (even for long forms)
Approaches
 Point and click components (buttons, selection lists, radio buttons
and checkboxes) don’t need to be validated unless there are rules
that deal will combinations that need to be validated.
 This leaves text input fields
 Validate each field as the user fills it in (using onBlur( ))
 if user fills in the field and then clicks Submit, the field won’t be checked
 place all validation scripts in a single file for inclusion via SRC attribute
of <script> tag and place one forme specific script in each form that
calles the validation routines for the individual fields
 means writing a script for each form
 too costly and tedious
 make a checkForm script that will iterate through a form’s elements
array to validate entire form
 requires a naming convention for naming fields
 must be generic enough for handling all type of fields (dates, ssns,
integers, reals,
 each form’s onSubmit invokes checkForm( )
 onchange Validation
 To force the browser to check each field
immediately, we add an onchange event to
each of the <input> tags in the form
 For example: if we wanted to check if the
value of a certain text field had a valid e-mail
address we would add this:

<input type="text" name="EMail" size="20"

onchange="emailvalidation(this);" >
 <form> onsubmit Event
 Your form must have a Submit button the user
clicks when completing the form
 An onsubmit event will be raised and you
should put this code in the <form> tag
 Call your event handler to go through and test
each form field as needed
 If the event handler returns false, the form
submission will be cancelled, if true the form will
submit and the form action will be executed
<form action="Process.php” onsubmit="return validate(this);” >
 onsubmit Event Handler
 Pass the form object as the this parameter
 onsubmit=“return validate(this);”
 This function should create variables for each field
that needs validation
 Set a inputvalid = true to begin with
 Use a series of if statements to perform each
validation test, if test fails set inputvalid =false and
set error message and/or alert message
 Finally, return inputvalid from the event handler
function validate(form) { General
Handler
// Set each of needed form variables

var input valid=true;

Event
var message=“Please fix the following errors \n”;
Structure
if (!testFunction(text)) {
// something is wrong
// message =+ “new error \n”;
// validinput= false;
}
if (!testFunction2(text)) {
// something else is wrong
// message =+ “new error \n”;
// validinput= false;
}
// do each validation test
if(!validinput) {
alert (message);
}
return validinput;
}
 Required Fields
 What fields on a Web form should be required?
 Good usability practice suggests the form designer
only make the user fill out necessary information
 This information may be required when sent to a
database such as non-null data
 Additional good practice would mark which fields
are required on the form
 Often marked with an *
 May spell out the “Required” or style differently
Testing for Required Entry
 Checking a textbox field could be done with a
simple test for text.length == 0
 Checking a select field to see if an option has been
selected use selectedIndex>0
 Place instruction text as the first <option>
 Checking a checkbox checked==true
 Checking a radiobutton need to loop through array
and test each checked==true
 May want to always set a default radio button as
selected=“selected”
Testing for Valid Input
 If a textbox asks for an email, test the
text entered is a valid email
 If a textbox asks for a date, test the
text entered is a valid date
 Very complex to text format and validity
 If a textbox asks for a zipcode, test the
text entered is a valid zipcode
 Regular Expressions
 You can use a symbol representation of a string
value called a regular expression to test your
input text
 There are many regular expressions available for
common tests
 U.S. Phone: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/
 Email: /^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}
[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$/
 Currency: /^\s*(\+|-)?((\d+(\.\d\d)?)|(\.\d\d))\s*$/
Regular Expression Syntax
/n,/r,/t match literal newline, carraige return, tab
\\, \/, \* match a special character literally, ignoring or escaping its special meaning
[…] Match any one character between the brackets
[^…] Match any one character not between the brackets
. Match any character other than the newline
\w, \W Match any word\non-word character
\s, \S Match any whitespace/non-whitespace
\d, \D Match any digit/non-digit
^, $ require match at beginning/end of a string or in multi-line mode,
beginning/end of a line
\b, \B require a match at a word/non-word boundary
? Optional term : Match zero or one time
+ Match previous term one or more times
Regular Expressions (more)

* Match term zero or more times

{n} Match pervious term n times
{n,} Match previous term n or more times
{n,m} Match prev term at least n time but no more than m times
a|b Match either a or b
(sub) Group sup-expression sub into a single term and remember the text that it
matched
\n Match exactly the same chars that were matched by sup-expression number
n
$n In replacement strings, substitute the text that matched the nth sub-
expression
search( ) and test( )
 A couple of very useful methods
 search( ) - similar to indexOf( )
 method on String
 String.search(regex)
 return -1 for no match; integer starting position if a match is found
 argument is a regular expression

 test( )
 method on regexObject
 returns boolean
 regex.test(String)
 false if no matches are found in String, true otherwise
 argument is a String
 Example Regular Expression
 Test to see if text is a number
 Returns true if number, false otherwise
 Does the text match the pattern?

// check if the text is a number

function IsNumber(fData) {
var reg = /^[0-9]+[\.]?[0-9]+$/;
return reg.test(fData)
}
Multiple Validations ???
 A Web form field may need more than
one validation test
 For example a textbox for age:
 It may be a required field
 It must be a number
 It must be in a range 0 - 120
 Order your validation tests from
general to most specific
 Modularize Your Functions
 It is a good idea to write a separate
function for each type of validation
 Generalize each function
 Place these frequently used validation
functions in their own external
JavaScript file
 Fine Tune Error Messages
 Help users to successfully complete
the Web form
 Provide hints on formatting by the fields on
the form rather than wait for
a submission error
 Be professional and helpful with
the error messages
 Try to provide both error message
by each field and summary text
in an alert box
Testing the Web Form
 First test that required fields must be provided
 Then test fields that need valid input
such as:
 Phone number
 Email address
 Dates
 Make sure error messages are appropriate
and specific for each error
JavaScript Form
Validation Summary
 JavaScript can be used for client-side
data validation of a Web form
 Modularize validation functions to be
reusable for future work
 Begin by making form user-friendly with
instructions and hints
 Provide helpful error messages