IS1500: Introduction to Web Development JavaScript: Form Validation & Exceptions Martin Schedlbauer, Ph.D. m.schedlbauer@neu.edu

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

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

Client-Side Validation Take this scenario: You are asking for a zip code as part of an address entry form. The user types in 021156 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

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

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

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

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

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

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