tutorial 10: programming with javascript session 3
TRANSCRIPT
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