Overview
• Event Handling
• Submit event
• JavaScript display properties
• Data validation
Events
Basics Change in state of object
Activities performed by user or by
browser
Event handling: Process of reacting over
the events
Event handlers: JavScript handles HTML
events
Events (Contd.)
Things that happen to HTML elements
Basics
Handles JavaScript interaction with HTML
JavaScript can react on these events
Used in combination with functions
Why events are important:
To control the sequence of activities in response to some
object state
Events (contd.)
Browser User
events Webpage events
loads or Clicking a
unloads button
Pressing any
Resizing a
key on the
window
keyboard
Event Handler attribute
• Basic syntax
<element event = ‘JavaScript’>
<element event = “JavaScript”>
Common HTML Events
Type Event Description
User Events onclick User clicks an HTML element
onchange HTML element has been changed
onmouseover Mouse moves over HTML element
onmousedown Mouse button pressed over element
onmouseout Cursor of mouse leaves element
onmouseup Mouse moves away from HTML element
onmousemove Pressing a key on keyboard
Common HTML Events
Type Event Description
Browser events onload Browser has finished loading the page
onunload Visitor leaves the current webpage, the
browser unloads it
onresize visitor resizes the window of the browser
Common HTML Events
Type Event Description
Keyboard Event onkeydown &
onkeyup User press and then release the key
Form events
To submit the form
onsubmit
onfocus To focus on element
onblur To focus is away from a form element
onchange
To change the value of a form element
onclick
• <element onclick="Script">
HTML • <button onclick="document.getElementById(
'demo').innerHTML =
Date()">Time?</button>
JavaScript object.onclick = function(){function_name()};
onclick (contd.)
• Example in HTML:
<!DOCTYPE html>
<html>
<body>
<button
onclick="document.getElementById('dt').innerHTML
=Date()">Time and Date</button>
<p id="dt"></p>
</body>
</html>
onclick (contd.)
• Example in JavaScript:
<!DOCTYPE html>
<html>
<body>
<h2>onclick Event</h2>
<p id="ef"><strong>Try it</strong></p>
<script>
document.getElementById("ef").onclick = function() {eventFunction()};
function eventFunction() {
document.getElementById("ef").innerHTML = "GET IT";
}
</script>
</body>
</html>
onmouseover
<html>
<head>
<h1> JavaScript onmouseover Event </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
onmouseover.htm
function mouseoverevent()
{
alert("Demo of onmouseover");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over text</p>
</body>
</html>
Onfocus
<html>
<head> Javascript onfocus event</head> onfocus.htm
<body>
<h2> Input</h2>
<input type="text" id="a" onfocus="focusevent()"/>
<script>
function focusevent()
{
document.getElementById("a").style.background="pink";
}
</script>
</body>
</html>
onkeydown
<html>
<head> Javascript onkeydown Event</head>
<body>
<h2> Input</h2>
<input type="text" id="a" onkeydown="keydownevent()"/>
<script>
onkeydown.htm
function keydownevent()
{
document.getElementById("a");
alert(“Demo of onkeydown");
}
</script>
</body>
</html>
onload
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page loaded
successfully');">
<script>
document.write("Demonstration of onload");
</script>
</body> onload.htm
</html>
Submit event
onsubmit
Occurs when a form is
Basics
submitted
• In HTML:
<element
onsubmit=“script_new”>
Syntax
• In JavaScript:
object.onsubmit =
function(){script_new};
onsubmit event (contd.)
• Example
<!DOCTYPE html>
<html>
<body>
<form onsubmit="formFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function formFunction() {
alert("Form submitted");
}
</script>
</body>
</html>
onsubmit event (contd.)
<!DOCTYPE html>
<html>
<body>
<p>onsubmit event</p>
<form id="new_Form">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("new_Form").onsubmit = function() {form_Function()};
function form_Function() {
alert("Form submitted");
}
</script>
</body>
</html>
JavaScript Display Properties
• Using different display properties, JavaScript
can display data through writing into
• HTML element: innerHTML
• HTML output: document.write()
• Alert box: window.alert()
Use of innerHTML
• innerHTML:
defines HTML content
Using document.getElementById method
Id attribute defines the HTML element
Use of innerHTML (contd.)
Example
<!DOCTYPE html>
<html>
<body>
<h2>Use of innerHTML</h2>
<p><b>Paragraph content</b></p>
<p id="js"></p>
<script>
document.getElementById("js").innerHTML = "Paragraph
content is changed into the First JavaScript";
</script>
</body>
</html>
Use of document.write()
• Used for testing
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>Demonstration of document.write</h2>
<p>documernt.write used for testing</p>
<script>
document.write(50*20);
</script>
</body>
</html>
Use of window.alert()
• Display alert box in an alert box
• Example
<!DOCTYPE html>
<html>
<body>
<h1>Demonstration of Alert Box</h1>
<p>Display of alert box</p>
<script>
window.alert(20+30);
</script>
</body>
</html>
Data Validation
Need
To validate
To authenticate user
inappropriate values
To validate name,
To validate form on password, email, date,
client side mobile number, address
and other fields
Data Validation
Functions
Basic validation
To check mandatory fields are
filled in
Data format validation
To check correct form and
value
Not a Number (NaN)
• JavaScript reserved word: number is not a legal
number
Example: let x = 20/ “ABC”;
Output: NaN
• global JavaScript function is NaN() to find out if a
value is a not a number.
Example: let x = 20/ “ABC”;
isNaN(x);
Output: True
Basic Form Validation
function validate()
if( document.aForm.Name.value == "" ) {
alert( "Please provide your name" );
document.aForm.Name.focus() ;
return false;
}
if( document.aForm.EMail.value == "" ) {
alert( "Please provide your Email" );
document.aForm.EMail.focus() ;
return false;
}
if( document.aForm.Zip.value == "" || isNaN( document.aForm.Zip.value ) ||
document.aForm.Zip.value.length != 5 )
alert( "Please provide a zip in the format #####." );
document.aForm.Zip.focus() ;
return false;
}
Data validation
<!DOCTYPE
<html>
<head>
<script>
function validateForm() {
let x = document.forms["mainForm"]["fname"].value;
if (x == "") {
alert(“First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="mainForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Validation
<!DOCTYPE>
<html>
<body>
<h2>Form Validation</h2>
<p>Input a number between 1 and 5:</p>
<input id="num">
<button type="button" onclick="num_Function()">Submit</button>
<p id="para"></p>
<script>
function num_Function() {
let x = document.getElementById("num").value;
Numeric_input.htm
let n;
if (x < 1 || x > 5) {
n = "Invalid input";
} else {
n = "Valid input";
}
document.getElementById("para").innerHTML = n;
}
</script>
</body>
</html>
Form Attributes
Attributes Description
Value Initial value for an input field
Readonly Input field is read-only
maxlength Maximum number of characters
multiple More than one value allowed in input field
pattern Regular expression for an input field
required Input field must be filled out before form submission
autofocus Focus input field automatically
Form Attributes (contd.)
• Example of maxlength
<!DOCTYPE html>
<html>
<body>
<h1>The input maxlength attribute</h1>
<form>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="5"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Attributes (contd.)
• Syntax: /pattern/modifiers;
• Google/i
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>pattern attribute</h2>
<form>
<label for="code">Country code:</label>
<input type="text" id="code" name="code" pattern="[A-Za-
z]{3}"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Attributes (contd.)
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>Autofocus attribute</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Password Validation
Must be alphanumeric
Basics
First letter of the password must be capital
Must contain a special character (@, $, !, &, etc)
Password length must be greater than 8 characters
Password fields should not be empty
Password Validation
function verifyPassword() {
var pw = document.getElementById("pswd").value;
//check empty password field
if(pw == "") {
document.getElementById("message").innerHTML = "**Fill the password please!";
return false;
}
//minimum password length validation
if(pw.length < 8) {
document.getElementById("message").innerHTML = "**Password length must be atleast 8 characters";
return false;
}
//maximum length of password validation
if(pw.length > 15) {
document.getElementById("message").innerHTML = "**Password length must not exceed 15 characters";
return false;
} else {
alert("Password is correct");
}
}
Confirm password validation
<script>
function matchPassword() {
var pw1 = document.getElementById("pswd1");
var pw2 = document.getElementById("pswd2");
if(pw1 != pw2)
{
alert("Passwords did not match");
} else {
alert("Password created successfully");
}
}
</script>
Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
Email validation
Basics Must contain the @ and . character
Must be at least one character before and
after the @
Must be at least two characters after .
(dot)
Email validation
Regex
RegExp Object:
Regular expression:
Pattern
Pattern of characters
with Properties and Methods
Syntax Example
/pattern/modifier(s); let pattern = /JavaScript/i;
Email validation
Example
<!DOCTYPE html>
<html>
<body>
<p>Demo of form validation</p>
<form >
E-mail: <input type="email" id=“abc" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-
z]{2,3}$">
<input type="submit">
</form>
<button onclick=“func_validate()">Try it</button>
<p id="demo"></p>
<script>
function func_validate() {
var x = document.getElementById(“abc").pattern;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
