CIS 89C
Client-Side Programming with JavaScript
Unit 18 – Form validation (week 8)
References:
McDuffie - Chapter 13
Validating Forms
Topics:
Opening statement - McDuffie page 429
What is form validation? - McDuffie page 430
Client side versus server side validation - McDuffie page 430
Batch validation versus real-time vaidation - McDuffie page 431
Calling a batch client-side form validation with onsubmit - McDuffie page 431
Creating you own form validation library onsubmit - McDuffie page 432
Verifying that required fields each have an entry - McDuffie page 432
Validating passwords - McDuffie page 440
Validating an e-mail address entry - McDuffie page 447
Validating a phone number entry - McDuffie page 448
Validating a zip code - McDuffie page 448
Validating a credit card entry - McDuffie page 449
Using images to display error messages inline - McDuffie page 457
Summary - McDuffie page 464
***********************************************************
Opening statement
Validation lets you tell the user when they enter something in a wrong format.
Validation lets you check that the information sent to the server is in a correct format.
These validation actions reduce the wait time and Internet traffic, to just tell the user that their input is clearly invalid, due to being the wrong format.
Of course, the server should verify everything it receives, both for valid format and for consistency with data the server can access from data bases.
You can build a library of validation functions, which you can use.
Often, passing this reduces the processing needed to find the current object.
Real time validation may be done onclick, onchange, or on other events that reflect the users actions.
Batch validation is usually done. Batch validation is done onsubmit of the form.
It is better to write the error messages into the page, rather than using an annoying alert.
***********************************************************
What is form validation?
Form validation is the checking of the data input by the user, to make sure it meets the required format, and is consistent with other information that is available.
***********************************************************
Client-side versus server-side validation
If JavaScript is available, it can be used for quick client-side validation.
JavaScript may not be available, if the user has it turned off.
The data available in the client environment may be limited,
so most of the validation is limited to format validation.
The good thing is that client-side validation does not need to go over the Internet, so it is fast.
Server side validation is relatively slow to respond to the user, because information transfer over the Internet is required. On the other hand, it can be much more effective validation. It is more effective because the data from the user can be compared with additional data from data bases. The server should also repeat the validation which the client-side processing should have done, just in case there is no client-side validation.
It is best to use both.
A newer technique would be to transmit the data as each
field is filled in by the user. This
could be done using
***********************************************************
Batch validation versus real time validation
Real time validation is done every time the user does something.
Batch validation is done onsubmit of the form.
You might, or might not, wish to annoy the user every time they enter a field.
You should always validate onsubmit of the form, even if there are some real time validation actions. This is because, if the validation fails in your form onsubmit processing, you can return false, and prevent the form from being submitted until the user corrects the errors.
Often you see a series of short forms.
Each one is validated, before going on to the next one.
This is a nice compromise between interrupting the user on each item, and waiting until there are 14 errors at the end of a long form.
Perhaps the first form allows the user to select the book to order.
Another form, allows the use to select the shipping address.
Another allows specification of how to pay.
Finally a form summarizes the entire transaction, and allows the user to approve completion.
This series of activities may just use JavaScript and
reloading pages over the Internet.
Alternately, some of the data may be managed locally. Also
***********************************************************
Calling a batch, client-side form validation with
onsubmit
Batch validation is called from the form onsubmit attribute value.
Example:
<form
action="http://stuff.org/process/it" method="post"
onsubmit="return
myValidateFunction(this);">
Do not forget the return.
this makes it easier for the function to know what form object is being processed.
***********************************************************
Creating you own form validation library onsubmit
You may wish to begin to build a set of common validation functions, which you can use when you validate forms. Experienced programmers usually work from existing work, rather than building things from scratch.
You can build your own functions, or you can use functions provided in free or product libraries. Many programmers use development environments to help them build JavaScript.
DoJo foundation provides one JavaScript toolkit.
I know some people who use DoJo in commercial development of JavaScript.
Laszlo is another.
Yahoo, Google, Macromedia, and eBay have JavaScript toolkits.
SourceForge is another.
I have had some exposure to Laszlo and DoJo, but do not know much about them, and very little about the others.
***********************************************************
Verifying that each required field has an entry
Testing to see if there is anything in the elements is often one test, that is commonly made.
Start by setting rc as true. If a problem is found, it will be changed to false.
Example:
// form onsubmit
handler
function
onsubmit_function(current_form)
{
var rc = true;
For elements:
<textbox> text box
<input type="text" /> one line text input
<input type="password" /> password
The text the user types in is contained in the value property of the object in the Document Object Model, which represents the element.
To test if the value for an object is empty test for two things.
Test for no value, or for an empty string:
Example continued:
// test for empty input text area
current_input_text_object =
document.getElementById("control1");
if(current_input_text_object.value == null || current_input_text_object.value
== "")
{
alert("Pet name must be
entered");
rc=false;
}
For radio button elements:
<input type="radio" name="setName" value="uniqueValue"/>
Test to see if one of the buttons has been cheked.
To do this, test the checked property in each element.
Example continued:
// test for no radio button checked
current_radio_button_array =
document.getElementsByName("age");
var checked = false;
for(var i=0; i < current_radio_button_array.length
; i++)
{
if ( current_radio_button_array[i].checked
)
checked = true;
}
if ( ! checked )
{
alert("Pet age must be
selected");
rc=false;
}
For select list elements:
<select> with its <option> elements select list
Test to see if at least one option is selected.
Example continued:
// test for no option selected
var pet_selection_list_element = document.getElementById("petSelectionElement");
if (pet_selection_list_element.selectedIndex < 0 )
{
alert("Type of pet must be selected");
rc=false;
}
At the end, return the rc value.
If it is still true, the form is submitted.
If an error was found, the value of rc was changed to false.
Example concluded:
return rc;
}
***********************************************************
Validating passwords
There are many things you can do in validating passwords.
One of the simplest is to check the length of the password.
Like an input <type="text">, the string entered by the user is a string, contained in the value property.
All strings have a length property, which we can check:
Example:
var
MIN_PASSWORD_LENGTH = 8;
the_password_object.value.length
> MIN_PASSWORD_LENGTH ;
Many more password tests require the use of regular expressions.
Regular expressions are widely used in inspecting the contents of strings.
You will se regular expressions in UNIX scripts, Perl, and many other places.
The best place to learn regular expressions is in the second UNIX course
CIS 18B Advanced UNIX / LINUX
***********************************************************
Validating an e-mail address entry
Validating a phone number entry
Validating a zip code
Validating a credit card entry
You may want to validate other details about the values in the user input.
There are examples in the McDuffie book for doing some validation on the data for:
e-mail address
phone number
zip code
credit card
***********************************************************
Using images to display error messages inline
We looked at how to add new html content.
This can be used to display error messages.
The McDuffie book has an example that shows how to use images to display error messages.
This involves the use of preloaded images.
This is beyond the scope of this course.
Messages can also be presented by using innerHTML, as we saw in unit 17.
We have often been using alert messages in this course.
They are easy to use for beginning course work, but are seldom used in commercial web sites.
***********************************************************
Summary
Forms fields can be validated immediately, is desired.
The form should be validated onsubmit.
Return true to complete the submission process, or false if the data is not acceptable.
Validation in the client onsubmit, eliminates much of the need to wait for the host, when there is just an obvious omission or format problem.
Always, the data needs to be revalidated on the host.
The host cannot be sure the data came from the expected web page, with the expected validation.