Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Validate The Form Data Before And After Submitting The Form Using JavaScript And PHP.

Tuesday, Apr 4, 2017

Tags:- JavaScript PHP MySQL


Form Validation is very important technique when you want to send data to the server. There are two types of validation Client-Side Validation and Server-Side Validation. In this tutorial we use both kind of validation technique to validate the form. We use JavaScript for Client-Side Validation and PHP for Server-Side Validation.You may also like jQuery form validation.


Validate Form data before and after submitting the form

You can validate form data before and after submitting the form in just two simple steps:-

  1. Make a HTML form and do Client-Side validation
  2. Recieve the form data and do Server-Side validation


Step 1.Make a HTML form and do Client-Side validation

We make a HTML form with post method and save it with a name validated_form.html

<html>
<head>

<script type="text/javascript">
function validate()
{
 var error="";
 var name = document.getElementById( "name_of_user" );
 if( name.value == "" )
 {
  error = " You Have To Write Your Name. ";
  document.getElementById( "error_para" ).innerHTML = error;
  return false;
 }

 var email = document.getElementById( "email_of_user" );
 if( email.value == "" || email.value.indexOf( "@" ) == -1 )
 {
  error = " You Have To Write Valid Email Address. ";
  document.getElementById( "error_para" ).innerHTML = error;
  return false;
 }

 var password = document.getElementById( "password_of_user" );
 if( password.value == "" || password.value >= 8 )
 {
  error = " Password Must Be More Than Or Equal To 8 Digits. ";
  document.getElementById( "error_para" ).innerHTML = error;
  return false;
 }

 else
 {
  return true;
 }
}

</script>

</head>
<body>
		
<form method="POST" action="getdata.php" onsubmit="return validate();">
 <input type="text" name="username" id="name_of_user">
 <input type="text" name="useremail" id="email_of_user">
 <input type="password" name="user_password" id="password_of_user">
 <input type="submit" name="submit_form" value="Submit">
</form>

<p id="error_para" ></p>

</body>
</html>

You can do more validation on Client-Side as per your need to make your code more secure.We submit the data from this HTML form to getdata.php where we do Server-Side validation and then insert out data in database.You may also like validate email and password using jQuery.



Step 2.Recieve the form data and do Server-Side validation

In this step we get all the data which get get from validated_form.html page and put Server-Side validation using PHP and then we insert all the secure data into the database.

// getdata.php

<?php
if( isset( $_POST['submit_form'] ) )
{
 validate_data($data)
 {
  $data = trim($data);
  $data = stripslashes($data);
  $data = strip_tags($data);
  $data = htmlspecialchars($data);
  $data = mysqli_real_escape_string($data);
  return $data;    
 }

 $name = validate_data( $_POST['username'] );
 $emailid = validate_data( $_POST['useremail'] );
 $password = validate_data( $_POST['user_password'] );

 $host = 'localhost';
 $user = 'root';
 $pass = ' ';

 mysql_connect($host, $user, $pass);
 mysql_select_db('demo');

 $insertdata=" INSERT INTO user_data VALUES( '$name','$emailid','$password' ) ";
 mysqli_query($insertdata);
}
?>


You can do more validation on Server-Side as per your need to make your code more secure.Use only MySQLi or PDO where possible because they are more secure than MySQL.


You can also add google recaptcha in form to make your form more secure and prevent from spamming.That's all, this is how to validate the form data before and after submitting the form using JavaScript and PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email