Skip to content

Instantly share code, notes, and snippets.

@Mauryashubham

Mauryashubham/index.php

Created September 7, 2017 11:42
Show Gist options
  • Save Mauryashubham/1a0e2e6d5e29246d6405665af25ec035 to your computer and use it in GitHub Desktop.
Save Mauryashubham/1a0e2e6d5e29246d6405665af25ec035 to your computer and use it in GitHub Desktop.
Download ZIP
Validate a Form using Simple JavaScript and PHP
Raw
index.php
/**
@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.php and paste the below code.
<?php
if(isset($_POST['register']))
{
if (empty(filter_var($_POST['name'], FILTER_SANITIZE_STRING)))
{
echo "<script type='text/javascript'>alert('Name is required');</script>";
}
elseif(empty(filter_var($_POST['email'], FILTER_SANITIZE_STRING)))
{
echo "<script type='text/javascript'>alert('email is required');</script>";
}
elseif(empty(filter_var($_POST['r_email'], FILTER_SANITIZE_STRING)))
{
echo "<script type='text/javascript'>alert('confirm email is required');</script>";
}
elseif(empty(filter_var($_POST['password'], FILTER_SANITIZE_STRING)))
{
echo "<script type='text/javascript'>alert('password is required');</script>";
}
elseif(empty(filter_var($_POST['c_password'], FILTER_SANITIZE_STRING)))
{
echo "<script type='text/javascript'>alert('confirm password is required');</script>";
}
else
{
$name=$_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$password=$_POST['password'];
$password = filter_var($password, FILTER_SANITIZE_STRING);
$c_password=$_POST['c_password'];
$c_password = filter_var($c_password, FILTER_SANITIZE_STRING);
$email=$_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$r_email=$_POST['r_email'];
$r_email = filter_var($r_email, FILTER_SANITIZE_STRING);
echo "Name : ".$name."<br>";
echo "Password : ".$password."<br>";
echo "confirm Password : ".$c_password."<br>";
echo "Email : ".$email."<br>";
echo "confirm Email : ".$r_email;
}
}
?>
<!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" action="<?php echo $_SERVER["PHP_SELF"];?>">
<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="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="password" 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="c_password" 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="email" 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="r_email" 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" name="register">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