Skip to content

Instantly share code, notes, and snippets.

@Mauryashubham

Mauryashubham/index.html

Last active September 4, 2017 07:20
Show Gist options
  • Save Mauryashubham/2f398929c9f60e881109c4beadf149f3 to your computer and use it in GitHub Desktop.
Save Mauryashubham/2f398929c9f60e881109c4beadf149f3 to your computer and use it in GitHub Desktop.
Download ZIP
Validate a Form using Simple JavaScript
Raw
index.html
/**
@author : Shubham Maurya,
Email id : [email protected]
**/
Hi all , Welcome to shubhammaurya.com , Today we are going to discuss ,
How to validate a form using JavaScript
So, To start first make a file in notepad and save it as index.html and paste the below code.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Validation example</title>
<meta name="author" content="Shubham Maurya">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/JavaScript">
function validate()
{
if(document.getElementById('name').value=="")
{
document.getElementById("name").style.border="2px solid red";
return false;
}
if(document.getElementById('password').value=="")
{
//alert( "Please Enter Your Password" );
document.getElementById("password").style.border="2px solid red";
return false;
}
if(document.getElementById('c_password').value=="")
{
//alert( "Please Confirm Password" );
document.getElementById("c_password").style.border="2px solid red";
return false;
}
if(document.getElementById('email').value=="")
{
// alert( "Please Enter Your Email" );
document.getElementById("email").style.border="2px solid red";
return false;
}
if(document.getElementById('r_email').value=="")
{
// alert( "Please Confirm Email" );
document.getElementById("r_email").style.border="2px solid red";
return false;
}
if(document.getElementById('password').value!=document.getElementById('c_password').value)
{
alert( "Password do not match" );
return false;
}
if(document.getElementById('email').value!=document.getElementById('r_email').value)
{
alert( "Email do not match" );
return false;
}
}
//Check name field
function check_name()
{
if(document.getElementById('name').value!="")
{
document.getElementById("name").style.border="1px solid #ccc";
}
if(document.getElementById('name').value=="")
{
document.getElementById("name").style.border="2px solid red";
return false;
}
}
//Check Password field
function check_password()
{
if(document.getElementById('password').value!="" )
{
document.getElementById("password").style.border="1px solid #ccc";
}
if(document.getElementById('password').value=="")
{
document.getElementById("password").style.border="2px solid red";
return false;
}
if(document.getElementById('c_password').value!="")
{
document.getElementById("c_password").style.border="1px solid #ccc";
}
if(document.getElementById('c_password').value=="")
{
document.getElementById("c_password").style.border="2px solid red";
return false;
}
}
//Check Email field
function check_email()
{
if(document.getElementById('email').value!="")
{
document.getElementById("email").style.border="1px solid #ccc";
}
if(document.getElementById('email').value=="")
{
document.getElementById("email").style.border="2px solid red";
return false;
}
if(document.getElementById('r_email').value!="")
{
document.getElementById("r_email").style.border="1px solid #ccc";
}
if(document.getElementById('r_email').value=="")
{
document.getElementById("r_email").style.border="2px solid red";
return false;
}
}
</script>
<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(event)
{
if(event.button==2)
{
alert(status);
return false;
}
}
</script>
</head>
<body>
<div class="container-fluid">
<section class="container">
<form method="post" name="form1" onsubmit="return validate(this);" autocomplete="off">
<div class="container-page">
<div class="col-md-6">
<h3 class="dark-grey">Registration</h3>
<div class="form-group col-lg-12">
<label>Username</label>
<input type="" name="" class="form-control" id="name" value="" onblur="check_name();">
</div>
<div class="form-group col-lg-6">
<label>Password</label>
<input type="password" name="" class="form-control" id="password" value=""
onblur="check_password();">
</div>
<div class="form-group col-lg-6">
<label>Repeat Password</label>
<input type="password" name="" class="form-control" id="c_password" value=""
onblur="check_password();">
</div>
<div class="form-group col-lg-6">
<label>Email Address</label>
<input type="email" name="" class="form-control" id="email" value="" onblur="check_email();">
</div>
<div class="form-group col-lg-6">
<label>Repeat Email Address</label>
<input type="email" name="" class="form-control" id="r_email" value="" onblur="check_email();">
</div>
<div class="col-sm-6">
<input type="checkbox" class="checkbox" />Sigh up for our newsletter
</div>
<div class="col-sm-6">
<input type="checkbox" class="checkbox" />Send notifications to this email
</div>
</div>
<div class="col-md-6">
<h3 class="dark-grey">Terms and Conditions</h3>
<p>
By clicking on "Register" you agree to The Company's' Terms and Conditions
</p>
<p>
While rare, prices are subject to change based on exchange rate fluctuations -
should such a fluctuation happen, we may request an additional payment. You have the option to request a full refund or to pay the new price. (Paragraph 13.5.8)
</p>
<p>
Should there be an error in the description or pricing of a product, we will provide you with a full refund (Paragraph 13.5.6)
</p>
<p>
Acceptance of an order by us is dependent on our suppliers ability to provide the product. (Paragraph 13.5.6)
</p>
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</section>
</div>
</body>
</html>
Raw
note.txt
For More go to : http://shubhammaurya.com/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment