1. IS1500: Introduction to Web Development
JavaScript: Form Validation & Exceptions
Martin Schedlbauer, Ph.D.

2. JavaScript: Client-Side Forms
Client-Side Scripting with JavaScript
Validating FORM Input
IS1500
JavaScript: Client-Side Forms

3. JavaScript: Client-Side Forms
Validating Forms
The content of form elements should generally be validated via a JavaScript function to ensure that it contains the expected input.
For example:
Does a text field really contain a number or does it contain text?
Is the date valid?
Does the credit card number has 15 or 16 digits?
Does a mandatory field contain input or has it been left empty?
Is the input in the expected range?
IS1500
JavaScript: Client-Side Forms

4. Client-Side Validation
Take this scenario:
You are asking for a zip code as part of an address entry form. The user types in or Boston, MA – clearly both are wrong zip codes. If you don’t check the validity of the zip code format then you would send incorrect data to the server where it must be checked and then an error page would need to be returned. That adds a lot of extra processing time. It would be much better to check if the field contains the correctly formatted data. For example, check that the field contains exactly five digits. If it doesn’t then display an error on the client and don’t submit the form to the server for processing.
IS1500
JavaScript: Client-Side Forms

5. JavaScript: Client-Side Forms
Client-Side Scripting with JavaScript
Validation Patterns
IS1500
JavaScript: Client-Side Forms

6. Pattern: No Empty Field
This example shows how to ensure that a field contains a value.
It checks if the field contents is empty ("").
Name: <input type="text" id="name" />
<p />
<button onClick="processForm()">Calculate</button>
<script>
function processForm() {
// retrieve form entries
var name = document.getElementById("name").value;
if (name == "") // check if name is empty
alert("Name cannot be empty!");
return; // stop processing; exit the function
} // end if
} // end processForm
</script>
IS1500
JavaScript: Client-Side Forms

7. Pattern: Number-Only Field
This example shows how to ensure that a field contains a number.
It checks if the field is not “not a number” using isNaN().
Name: <input type="text" id="number" />
<p />
<button onClick="processForm()">Calculate</button>
<script>
function processForm() {
// retrieve form entries
var num = document.getElementById("number").value;
if (isNaN(num) == true) // check if num is not a number
alert("Must be a number, no letters or characters allowed!");
return; // stop processing; exit the function
} // end if
} // end processForm
</script>
IS1500
JavaScript: Client-Side Forms

8. Stopping a Function with return
When a function reaches a point where continuing is not reasonable because it does not have the correct input values, it must “return”.
The return statement exits the function immediately.
No code after the return is executed.
IS1500
JavaScript: Client-Side Forms

9. Summary, Review, & Questions…
IS1500
JavaScript: Client-Side Forms

10. JavaScript: Client-Side Forms
Name: <input type="text" id="name" />
<p />
<button onClick="processForm()">Calculate</button>
<script>
function processForm() {
// retrieve form entries
var name = document.getElementById("name").value;
alert("in processForm: 2 - " + name);
if (name == "") // check if name is empty
alert("Name cannot be empty!");
return; //stop processing; exit the function
} // end if
} // end processForm
</script>
IS1500
JavaScript: Client-Side Forms