TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 3

TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT

Session 3

Objectives

Why using JavaScript for Form Validation How to check for non-empty fields How to check for all numbers How to check for all letters How to check for numbers and letters How to restrict the length How to check a selection has been made How to validate e-mail

Why Using JavaScript for Form Validation? Avoid the headaches of incomplete form

submitted data. Idea: Using JavaScript form validation

to provide a method to check the user entered information before they can even submit it.

To display useful alerts to inform the user what information they have entered incorrectly. how they can fix it.

How to check for non-empty fieldsStep 1: JavaScript Code (fill the blank)// If the length of the element's string is 0 then display helper message

function notEmpty(elem, helperMsg){

if(elem.value.length == 0){

alert(helperMsg); elem.focus(); //set the focus to this input

return false; }

return true; }

Step 2: Add onclick attribute to the field

Practice: check for non-empty fields In-Class Example

How to Check for All NumbersStep 1: JavaScript Code// If the element's string matches the regular expression it is

all numbers

function isNumeric(elem, helperMsg){

var numericExpression = /^[0-9]+$/;

if(elem.value.match(numericExpression)){

return true;

}else{

alert(helperMsg);

elem.focus();

return false;

}

}

How to Check for All Numbers Step 2: Add onclick attribute to the field

Practice: check for all numbers In-Class Example

How to Check for All Letters

Step 1: JavaScript Code// If the element's string matches the regular expression it is all

letters

function isAlphabet(elem, helperMsg){

var alphaExp = /^[a-zA-Z]+$/;

if(elem.value.match(alphaExp)){

return true;

} else{

alert(helperMsg);

elem.focus();

return false;

}

}

Step 2: Add onclick attribute to the field

Practice: Check for all Letters In-Class Example

How to Check for Numbers and Letters Step 1: JavaScript Code// If the element's string matches the regular expression it is

numbers and letters

function isAlphanumeric(elem, helperMsg){

var alphaExp = /^[a-zA-Z0-9\s-]+$/;

if(elem.value.match(alphaExp)){

return true;

}else{

alert(helperMsg);

elem.focus();

return false;

}

}

Step 2: Add onclick attribute to the field

Practice: Check for Numbers and Letters In-Class Example

How to Restrict the Length

Step 1: JavaScript Codefunction lengthRestriction(elem, min, max){

var uInput = elem.value;

if(uInput.length >= min && uInput.length <= max){

return true;

}else{

alert("Please enter between " +min+ " and " +max+ " characters");

elem.focus();

return false;}

}

Step 2: Add onclick attribute to the field

Practice: Restrict the Length In-Class Example

How to Check a Selection has been Made Step 1: JavaScript Codefunction madeSelection(elem, helperMsg){

if(elem.value == "Please Choose"){

alert(helperMsg);

elem.focus();

return false;

}else{

return true;

}

}

Step 2: Add onclick attribute to the field

Practice: Check Selection Made In-Class Example

How to Validate E-mail

Step 1: JavaScript Codefunction emailValidator(elem, helperMsg){

var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

if(elem.value.match(emailExp)){

return true;

}else{

alert(helperMsg);

elem.focus();

return false;

}}

Step 2: Add onclick attribute to the field

Practice: Validate E-mail

In-Class Example

Validating a Form all at Once: Bringing All Together JavaScript Code:

Each required fields should be filled (or non-empty).

Form Code: Each form has a JavaScript event called

onSubmit that is triggered when its submit button is clicked.

If this event returns 0 or false then a form cannot be submitted

if the event returns 1 or true it will always be submitted.

Practice: Complete Validation a Form In Class Example