Javascript Validations
How to use JavaScript to validate an HTML form. We have discussed the following HTML Form Validation topics with examples:

1. Required fields 
2. Letters only
3. Name fields
4. Numbers only
5. Email validation
6. Select from list
7. Password Validations. etc..
Required Field Validation :
<html>
<head>
<title>Required Field Validation </title>

<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>

</head>
<body>
 
<form>
Required Field: <input type='text' id='req1'/>
<input type='button' onclick="notEmpty(document.getElementById('req1'), 'Please Enter a any value or name')" value='Check Field' />
</form>

</body>
</html>
Output :
Required Field:
Letters only :
<html>
<head>
<title>Letters only</title>
 
<script type='text/javascript'>
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>

</head>
<body>

<form>
Letters Only: <input type='text' id='letters'/>
<input type='button' onclick="isAlphabet(document.getElementById('letters'), 'Please enter letters only.')" value='Check Field' />
</form>

</body>
</html>
Output :
Letters Only:
Name Field Validation :
<html>
<head>
<title>Name fields</title>

<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("Please enter first name.");
  return false;
  }
 var y=document.forms["myForm"]["lname"].value;
 if(y==null || y=="")
 {
 alert("Please enter last name."); 
 }
}
</script>

<style type="text/css">
.lable{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; 
font-style:italic; 
margin:5px 0px; 
font-weight:bold; 
clear:both;
}
.cus_form{ 
height:30px; 
padding:0px 1px; 
margin:2px 0px 10px;
} 
.cus_btn{
padding:7px 15px; 
border-radius:2px; 
background:#09C; 
color:#FFF; 
margin-left:10px;
}
.cus_btn:hover{ background:#069;}
</style>

</head>
<body>

<form name="myForm" action="" onSubmit="return validateForm()" method="post">
<label class="lable">First Name</label>
<input type="text" class="cus_form" name="fname" /><br>
<label class="lable">Last Name</label>
<input type="text" class="cus_form" name="lname" /><br>
<input type="submit" class="cus_btn" value="Submit">
</form>

</body>
</html>
Output :


Numbers Only :
<html>
<head>
<title>Numbers Only</title>
 
<style type="text/css">
.lable{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; 
font-style:italic; 
margin:5px 0px; 
font-weight:bold; 
clear:both;
}
.cus_form{ 
height:30px; 
padding:0px 1px; 
margin:2px 0px 10px;
} 
.cus_btn{
padding:7px 15px; 
border-radius:2px; 
background:#09C; 
color:#FFF; 
margin-left:10px;
}
.cus_btn:hover{ background:#069;}
</style>
 
<script type='text/javascript'>
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>

</head>
<body>
 
 
<form>
<label class="lable">Numbers Only :</label>
 <input type='text' id='numbers' class="cus_form"/>
<input type='button' onclick="isNumeric(document.getElementById('numbers'), 'Please Enter Numbers Only')" class="cus_btn" value='Check Field' />
</form>

</body>
</html>
Output :
Email Validations :
	
<html>
<head>
<title>Email Validations</title>
 
<style type="text/css">
.lable{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; 
font-style:italic; 
margin:5px 0px; 
font-weight:bold; 
clear:both;
}
.cus_form{ 
height:30px; 
padding:0px 1px; 
margin:2px 0px 10px;
} 
.cus_btn{
padding:7px 15px; 
border-radius:2px; 
background:#09C; 
color:#FFF; 
margin-left:10px;
}
.cus_btn:hover{ background:#069;}
</style>
 
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].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;
  }
}
</script>
 
<form name="myForm" action="" onSubmit="return validateForm();" method="post">
<label class="lable">Email :</label> 
<input type="text" name="email" class="cus_form">
<input type="submit" class="cus_btn" value="Submit">
</form>
 
</body>
</html>
Output :
Select From List :
<html>
<head>
<title>Select Box Validation</title>
 
<style type="text/css">
.lable{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; font-style:italic; 
margin:5px 0px; 
font-weight:bold; 
clear:both;
}
.cus_form{ 
height:30px; 
padding:0px 1px; 
margin:2px 0px 10px;
} 
.cus_btn{
padding:7px 15px; 
border-radius:2px; 
background:#09C; 
color:#FFF; 
margin-left:10px;
}
.cus_btn:hover{ background:#069;}
</style>
 
<script type="text/javascript">
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form>
  <label class="lable">Selection :</label>
  <select id='selection' class="cus_form">
    <option>Please Choose</option>
    <option>Google</option>
    <option>Bing</option>
    <option>Yahoo</option>
  </select>
  <input type='button' class="cus_btn" onClick="madeSelection(document.getElementById('selection'), 'Please Choose Something')" value='Check Field' />
</form>
 
 
</body>
</html>
Output :
Password Validations :
<html>
<head>
<title>Password Validations</title>
 
<style type="text/css">
.lable{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; font-style:italic; 
margin:5px 0px; 
font-weight:bold; 
clear:both;
}
.cus_form{ 
height:30px; 
padding:0px 1px; 
margin:2px 0px 10px;
} 
.cus_btn{
padding:7px 15px; 
border-radius:2px; 
background:#09C; 
color:#FFF; 
margin-left:10px;
}
.cus_btn:hover{ background:#069;}
</style>
 
<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>

</head>
<body>
 
<form name="f1" action="" onsubmit="return matchpass()">
<label class="lable">Password :</label>
<input type="password" name="password" class="cus_form" /><br/>
 
<label class="lable">Re-enter Password :</label>
<input type="password" name="password2" class="cus_form"/><br/>
<input type="submit" class="cus_btn">
</form>
 
</body>
</html>
Output :


We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.