Scribd
Upload
222 views

Form Validation

The document discusses various JavaScript techniques for validating forms, including validating names, passwords, emails, numbers, and matching passwords. It provides code examples for validating that a name and password are entered, passwords match, only numeric values are entered for a number field, and using images to display validation status. The document also covers common HTML/DOM events used with JavaScript validation like onclick, onsubmit, onkeydown and others.

Uploaded by

JASPER WESSLY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
222 views

Form Validation

The document discusses various JavaScript techniques for validating forms, including validating names, passwords, emails, numbers, and matching passwords. It provides code examples for validating that a name and password are entered, passwords match, only numeric values are entered for a number field, and using images to display validation status. The document also covers common HTML/DOM events used with JavaScript validation like onclick, onsubmit, onkeydown and others.

Uploaded by

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

JavaScript Form Validation

JavaScript form validation


Example of JavaScript validation
JavaScript email validation
It is important to validate the form submitted by the user because it can have i
nappropriate values. So validation is must.
The JavaScript provides you the facility the validate the form on the client sid
e so processing will be fast than server-side validation. So, most of the web de
velopers prefer JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile number e
tc fields.
JavaScript form validation example
In this example, we are going to validate the name and password. The name can t be
empty and password can t be less than 6 characters long.
Here, we are validating the form on form submit. The user will not be forwarded
to the next page until given values are correct.
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform
()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
Test it Now
JavaScript Retype 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>
Test it Now
JavaScript Number Validation
Let's validate the textfield for numeric value only. Here, we are using isNaN()
function.
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
Test it Now
JavaScript validation with image
Let s see an interactive JavaScript form validation example that displays correct
and incorrect image if input is correct or incorrect.
<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;
if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='unchecked.gif'/> Please enter your name";
status=false;
}else{
document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
status=true;
}
if(password.length<6){
document.getElementById("passwordloc").innerHTML=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
}else{
document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
}
return status;
}
</script>
<form name="f1" action="#" onsubmit="return validate()">

<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>
Test it Now
Output:
Enter Name:
Enter Password:
register
JavaScript email validation
We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate the email id such as:
email
There
There
Let's

id must
must be
must be
see the

contain the @ and . character


at least one character before and after the @.
at least two characters after . (dot).
simple example to validate the email field.

<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotpo
sition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();"
>
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
-----------------------HTML/DOM events for JavaScript
HTML or DOM events are widely used in JavaScript code. JavaScript code is execut
ed with HTML/DOM events. So before learning JavaScript, let s have some idea about
events.
Events Description
onclick occurs when element is clicked.
ondblclick
occurs when element is double-clicked.
onfocus occurs when an element gets focus such as button, input, textarea etc.
onblur occurs when form looses the focus from an element.
onsubmit
occurs when form is submitted.

onmouseover
onmouseout
).
onmousedown
onmouseup
essed).
onload occurs
onunload
onscroll
onresized
onreset occurs
onkeydown
onkeypress
onkeyup occurs

occurs when mouse is moved over an element.


occurs when mouse is moved out from an element (after moved over
occurs when mouse button is pressed over an element.
occurs when mouse is released from an element (after mouse is pr
when document, object or frameset is loaded.
occurs when body or frameset is unloaded.
occurs when document is scrolled.
occurs when document is resized.
when form is reset.
occurs when key is being pressed.
occurs when user presses the key.
when key is released.

-------------------

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy