Form Validation

1. Form Validation

2. Learning Objectives By the end of this lecture, you should be able to: • Describe what is meant by ‘form validation’ • Understand why form validation is important • Do basic form validation using jQuery including: • Ensuring required text fields have information in them • Ensuring that at least one of a (required) group of radio buttons was selected • Understand how and when to use ‘return false’

3. Random topic: The return false; statement Here is an important piece of code to know: return false; This statement immediately causes the function to end. Any remaining code that is present in the function will not be executed. For example: function doStuff() { var num1=5, num2=5; var sum = num1+num2; return false; //function immediately ends alert(sum); //this statement will NOT be executed } We might ‘return false’ in a situation where we have a function that works with a form. For example, before we continue on with the various code required to process the form, we frequently want to make sure the form has been properly filled out. The process of checking a form to make sure that all required fields are properly filled out is called “form validation”. If there is something that is not properly done in the form, we will typically want to let the user know of the problem. But more importantly, we would then want to prevent the remainder of the function from proceeding. For example, if the user forgot to enter their email address, we would not want to continue with a function that adds the user to a mailing list. It is at such a point that we would use return false;

4. Example using return false; Suppose we had a form in which we ask the user to enter their address into a text field called ‘txtEmailAddress’. Once they enter their address, we would add their address to our database. We should first check to make sure that the field is not empty. If it is empty, we would let them know that they forgot to complete that field. At that point, we would use ‘return false’ to end the function. function addToMailingList() { var emailAddress = $('#txtEmailAddress').val(); if ( emailAddress == '') //if the field is empty { alert('You forgot to enter your address!'); return false; //ENDS the function right here! } //CODE TO ADD THE ADDRESS TO THE DATABASE WOULD GO HERE... //However, if we had executed 'return false', then we //would never reach this point } //end addToMailingList()

5. Form Validation Example A very important skill in creating web forms is this ability to “validate” a form. That is, to ensure that the form has been properly and/or completely filled out. Examples of form validation include: • Making sure that the user has filled out all required fields (name, phone number, etc) • Making sure that the user has chosen at least one of a series of radio buttons that ask a question that requires an answer. (E.g. “What is your preferred t-shirt size?”) • Making sure that the user has not entered inappropriate data in a field. • This is a pretty important one nowadays. One method used by hackers to break into websites is to enter scripting code into a text field and ‘hijack’ the script to access resources. Therefore, for secure websites, all forms are typically validated to make sure that key programming symbols (semicolons, quotes, asterisks and other important characters) are not present where they do not belong. This is why you will sometimes submit a form only to have it come back and say something like: “Please enter only numbers for your phone number. Please do not enter any other characters such as parentheses or dashes”. For our example, let’s write some code to make sure that a user has not left a text field called ‘txtName’ blank. If they did neglect to enter their name, we will output an alert box letting them know of the error, and highlight that textfield on the page. Here is the hypothetical text field: Name? <input type="text" id="txtName"> Now our script: var userData = $('#txtName').val(); if ( userData == '' ) //if it is an empty string, this means the user didn’t enter anything { alert('Please be sure to enter your name.'); $('#txtName').css('background-color', 'yellow'); //Highlight the empty field return false; //since the form was incomplete, do not continue to process it }

6. Form Validation Example Let’s write some code to make sure that a user has not left the ‘name’ and ‘email’ text fields blank. We will also make sure that they chose one option for their ‘t-shirt size’. For all of these cases, we will output an alert box letting them know which item they neglected to complete. We will also highlight the label preceding the input that was missed. The function connected to the form checks to see that the form was properly completed and all required items were filled out. Start by studying the form and then study the script. FILE: form_validation_simple.htm

7. REVIEW: Checking for ‘UN-checked’ Recall our discussion on determining whether or not something such as a checkbox has NOT been checked: If the following code will determine if something IS checked: if ( $('#chkMushrooms').prop('checked') ) alert('You want mushrooms'); Then we can use the ‘!’ operator, to determine if something has NOT been checked: if ( !$('#chkMushrooms').prop('checked') ) alert('You do NOT want mushrooms');

8. Checking for un-checked with Radio Buttons We’ve discussed how to determine whether or not a checkbox has been checked. But what if we want to do the same thing with a group of radio buttons? In fact, another very common task in form validation is to check to see if the user neglected to check any of a group of radio buttons. Suppose you have the following radio buttons: <label for= "radColor" id= "lblColor" >Preferred T-Shirt Color?</label> Red <input type="radio" name="radColor" id="radRed"> <br> Blue <input type="radio" name="radColor" id="radBlue"> <br> Green <input type="radio" name="radColor" id="radGreen"> <br> If we want to verify that the user DID choose one of the three buttons, we need to make sure that all three of the buttons are NOT UN-checked. (I realize there are a lot of negatives in the previous sentence, so take a moment to make sure you understand what we are trying to do.) Here is the code to see if ALL 3 buttons are unchecked: if ( !$('#radRed').prop('checked') && !$('#radBlue').prop('checked') && !$('#radGreen').prop('checked') ) { alert('You must choose a color!'); $('lblColor').css('background-color', 'yellow'); return false; }

9. Checking for ‘UN-checked’ with Radio Buttons Consider the previous example in which we checked to see if all of a group of radio buttons were unchecked: if ( !$('#radRed').prop('checked') && !$('#radBlue').prop('checked') && !$('#radGreen').prop('checked') ) { alert('You must choose a color!'); $('lblColor').css('background-color', 'yellow'); return false; } Now imagine if instead of 3 colors, you had 15 colors…. This would make for a rather long and error-prone conditional expression. Can you think of a better way? Answer: Since all radio buttons in a group shold have the same name, you can simply use an attribute selector to select all of the buttons together: if ( !$('input[name="radColor"]').prop('checked')) #if no button is checked { alert('You must choose a color!'); $('lblColor').css('background-color', 'yellow'); return false; }

10. More elaborate form validation example Here is a slightly more elaborate example of form validation: FILE: museum_admission_validation.htm