JavaScript with Sean Doyle

Lesson 7: HTML Form Validation

HTML Form Handling

The Big 5 Concepts

  1. A form is a special element that sends form data (paired with a name attribute) to the web server when the form is submitted.
  2. By default, the page refreshes and blanks the form fields on submission.
  3. The form element has a special onsubmit listener to call a function when the form is submitted. In this function, we can retrieve and validate the values from the form elements.
  4. Use return false; to prevent a form from submitting. This is useful when validating form fields.
  5. Other form elements have different events and ways of accessing the user input.

Code Samples

//Below, creating one variable that holds the form and all of its elements. This variable is sometimes referred to as a form "handle". The DOM has a forms property, an array of the form elements on the page. With form elements, we can access them by dot notation through the form handle and their name attribute.
//If, in the HTML file we have....
<form  method="post" name="myForm" action="process.php">
var formHandle = document.forms.myForm;

//To set up a "listener" for the submit event on our form...
formHandle.onsubmit = processForm; //Doesn't have to be 'processForm', could be 'xyz'.

function processForm(){
//In here is where we can get input from the form fields. We have to wait for the form to submit, otherwise, the fields will be what they are when the page loads, that is, empty.
        var nameInput = formHandle.nameIn; //Use the form handle variable and the name attribute of the target element.

//nameInput is holding the <input type="text"> element, but it's the element value that we want to check...
        if( nameInput.value ==== "" ){
            return false; //This prevents the form from submitting, in this case, due to receiving an empty string as input.
        }

}//end processForm

For More Information

A Deeper Dive

Regular Expressions (regex)

The Big 5 Concepts

  1. A Regular Expression is a pattern of string characters. For example, a Humber student ID is a pattern of the letter 'N' followed by eight digits.
  2. We can use a regular expression to compare a string (or search inside a string) for a pattern match.
  3. In JavaScript, a regular expression is a special object with its own properties and methods.
  4. Regular Expressions use special characters as placeholders in the pattern to represent the type, amount and range of each character in the pattern.
  5. Regex literacy is a required skill for web developers. You may not always have to write them, but you should be able to debug a regex pattern and know what it is looking for.

Code Samples

//A Regular Expression object is created by the slash delimiters...
var myRegEx = /test/; //Every character between the slashes becomes part of the pattern.

//Using special metacharacters to act as placeholders in a pattern, this is the regex for all of our HTTP course codes. It will find a match for http5111 and HTTP5310 or any string that starts with 'http' followed by a '5', then three digits.
var courseCodes =/^http5\d\d\d$/i;
//The ^ signifies the start of the string; 'http5' is the literal characters of the string; \d is for a single digit; $ signifies the end of the string; and the i after the / signifies case insensitive. Notice no spaces, adding a space for legibility would add a space character to the regex pattern!

//Using the regex.test() method we can look for a pattern match in the provided string...
courseCodes.test('http5221'); //returns true since this matches the regex pattern.
courseCodes.test('http522e'); //returns false since this does not match the regex pattern.

For More Information

A Deeper Dive