Scribd
Upload
39 views13 pages

Validation: Get Input From Input Box Checking Input Not Empty Presence Check

The document discusses different types of form validation including: 1) Presence validation to check if a field is empty. 2) Range validation to check if a number is within a specified range. 3) Type validation to check if the input is a number or text. 4) Length validation to check the length of an input. 5) Format validation like checking email format. It also discusses using if/else conditional statements for validation and making validation code more flexible and reusable using functions.

Uploaded by

Jessica Jap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views13 pages

Validation: Get Input From Input Box Checking Input Not Empty Presence Check

The document discusses different types of form validation including: 1) Presence validation to check if a field is empty. 2) Range validation to check if a number is within a specified range. 3) Type validation to check if the input is a number or text. 4) Length validation to check the length of an input. 5) Format validation like checking email format. It also discusses using if/else conditional statements for validation and making validation code more flexible and reusable using functions.

Uploaded by

Jessica Jap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

VALIDATION

Get Input from input box


Var j =document.getElementById("input1").value

Checking input Not Empty => Presence Check

If ( j==)
{
alert (please filled the empty textbox)
}
VALIDATION
Checking range of Numbers => Range Check
var k=parseInt(x);
if (k<0 || k>12) {
alert("fill number between 1-12");
}
VALIDATION
Checking input type in number or text => Type Check
if (isNaN(j)) {
alert("please numeric");
}
Checking input length => Length Check
x=j.length; // get input length
if (x<5) {
alert("not long enough");
}
Condition
if (condition) {
block of code to be executed if the condition is true
}

if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
Condition
if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false
and condition2 is true
} else {
block of code to be executed if the condition1 is false
and condition2 is false
}
VALIDATION

Presence check

Month ( 1<Month<12 )
Problem with if
Too many if, makes the programmer hard to maintain the code

Example
//check text cannot be empty
If ( j==)
{ alert (please filled the empty textbox)
}
//Check if range between 1-12
if (j<0 || j>12) {
alert("fill number between 1-12");
}
IF THEN ELSE
//Check if not empty
If ( j==)
{
alert (please filled the empty textbox);
}
else{
alert(you completed the text);
}
Working with Css
<style>
p{color: red;}

input{ background-color: antiquewhite; color: brown;


border-color: cadetblue;}

h2{font-family: verdana; font-size: 13pt;}


</style>
Create 3 More

Day ( 1<Day<31 ) Month ( 1<Month<31 ) Year ( 1980<Month<2000)

Presence check
VALIDATION
Count index of a text (Case sensitive)
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("welcome");
Result 13
Count index of a last text (Case sensitive)
var str = "Hello planet earth, you are a great planet.";
var n = str.lastIndexOf("planet");
Result 36
VALIDATION
Format check (Email)
var x=document.getElementById("input1").value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
Making the code more flexible
Function in a function
Function hello() {
hello1();
}
function hello1(){
{
alert(hello);
}
Function with passing parameter/variable Parameter
function myFunction(p1, p2) {
return p1 * p2; // the function returns the product of p1 and p2
}

You might also like