✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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

Last Updated : Jul 1, 2023

IN - JavaScript PHP MySQL | Written & Updated By - Ashish

In this tutorial we use both kind of validation technique to validate the form, 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.

We use JavaScript for Client-Side Validation and PHP for Server-Side Validation.

You may also like jQuery form validation.

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

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. I hope this tutorial on validate form using JavaScript and PHP helps you and the steps and method mentioned above are easy to follow and implement.