Registration form using javascript and php.

See more:

Javascript

PHP

In my code below I am using javascript and php for building registration form. There are two files ``register.php`` that contains html code for form, javascript library and javascript code. Second file ``reghand.php`` handles php code for validation and inserting data. Data is inserted correctly into database after form validation but problem appears when validation fails. It's like no javascript comes into action, when validation fails I get redirected to reghand.php where validation errors are shown ``{"username":"inuse","password":"missmatch"}`` these are errors from my reghand.php but I want to use javascript error message that's on ``register.php`` and that too should appear on the form page itself, not on ``reghand.php`` Please help.

``register.php``

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script>
        $(document).ready(function(){
  $("form.register").change(function() {
    $.post("register.php", $("form.register").serialize(), function( data ) {
      if( data.flname == "cntbempty" )
        $("p#name_error").slideDown();
      else
        $("p#name_error").hide();
      if( data.username == "inuse" )
        $("p#username_error").slideDown();
      else
        $("p#username_error").hide();
      if( data.password == "missmatch" )
        $("p#password_error").slideDown();
      else
        $("p#password_error").hide();
      if( data.email == "notvalid" )
        $("p#email_error").slideDown();
      else
        $("p#email_error").hide();
    }, "json");
  });
});

<form action="reghand.php" method="post" class="register">
   <fieldset>
   <legend>Registration</legend>
   <input type="text" name="fname" required="required" maxlength="15" placeholder="First Name"/>        
   <input type="text" name="lname" required="required" maxlength="15" placeholder="Last Name"/>
   <p id="name_error" class="error">First name Last name cannot be empty and can be same</p>
   <input type="text" name="username" required="required" maxlength="15" placeholder="Username" class="username" />        
   <p id="username_error" class="error">That Username is unavailable</p>       
   <input type="email" name="email" required="required" maxlength="35" placeholder="Email"/>        
   <p id="email_error" class="error">That Email is already registered</p>       
   <input type="password" name="password" required="required" maxlength="15" placeholder="Password"/>        
   <input type="password" name="password2" required="required" maxlength="15" placeholder="Confirm Password"/>
   <p id="password_error" class="error">Passwords do not match</p>
   <input type="submit" name="reg" value="Sign Up!">
 </fieldset>
</form>

``reghand.php``

<?php
if(isset($_POST['reg'])){
 $fn = ucfirst($_POST['fname']);
 $ln = ucfirst($_POST['lname']);
 $un = $_POST['username'];
 $em = $_POST['email'];
 $pswd = $_POST['password'];
 $pswd2 = $_POST['password2'];
 $sql=$db->prepare("SELECT username FROM users WHERE username=:username");
 $sql->execute(array(':username'=>$un));
 $row = $sql->fetch(PDO::FETCH_ASSOC);
 $db_username = $row['username'];
 $usernames = $db_username;
 $data = array();
 if( isset($fn) && isset($ln) ) {
  if( $fn != "" && $ln!="" && $fn == $ln ) {
    $data["flname"] = "cntbempty";
   }
  }
 if( isset($un) ) {
  if ($un == $usernames )  {
    $data["username"] = "inuse";
   }
  }
 if( isset($pswd) && isset($pswd2) ) {
  if( $pswd2 != "" && $pswd != $pswd2 ) {
    $data["password"] = "missmatch";
   }
  }
  if( isset( $em ) ) {
   if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $_POST["email"] ) ) {
     $data["email"] = "notvalid";
   }
  }
 if(!empty($data))
 {
 echo json_encode($data);
 die;
 }
  else{
  $pswd = password_hash($pswd, PASSWORD_DEFAULT);
  $pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
  $stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2) VALUES (:username,:first_name,:last_name,:email,:password,:password2)");  
  $stmt->execute( array(':username'=>$un,':first_name'=>$fn,':last_name'=>$ln,':email'=>$em,':password'=>$pswd,':password2'=>$pswd2));
  }
  if ($stmt->rowCount() == 1) {
    header("Location: login.php");
  } 
  else {
    echo "error";
  }
}
?>