Login Validation from both server and client side (PHP vs Javascript)

Validation is the process of checking or proving the validity or accuracy of something. So in order to maintain the validity or accuracy in login form we use php as the server side and javascript as the client side.

Client Side : In client-side validation method, all the input validations and error recovery process is carried out on the client side i.e on the user’s browser.

Server side : In server-side validation, all the input validations and error recovery process is carried out on the server side using the high level programming language like php java etc.

Difference between client side and server side

Client Side	Server side
Client-side validation is faster.	Server side validation is slower
Client-side validation is done on the web page	Server-side validation is done on the web server
Client-side validation is less secure	Server-side validation is more secure
User can see the code	User can not see the code

Question:

Write a program to implement a validation using both server and client side validation process for the successful login system where username must be contain 5 letters and password should contain more than 10 character with one uppercase , number and special symbols.

Answer : Download form here

Create a php file : login.php and paste the code


<?php
    if(isset($_POST['login'])){
        $username = $_POST['username'];
        $password = $_POST['password'];

        $username_length=strlen($username);
        $password_length=strlen($password);


        if($username == NULL && $password == NULL) {
            $error_message = "Enter  username or password";
        }
        else{
            if($username_length>=5 && $password_length >= 10 && preg_match('/[A-Z]/', $password)
             && preg_match('/[a-z]/', $password) && 
             preg_match('/['^?$%&*()}{@#~?><>,|=_+?-]/', $password)){
               header('Location:admin.php');
             }
             else{
                 if($username_length < 5 ){
                   $user_error="Username must be atleast 5 characters ..";
                }
                if($password_length < 10){
                   $password_error="Password must be atleast 10 characters..";
                 }
                 if(preg_match('/^[A-Z]/',$password) or preg_match('/^[a-z]/',$password) or 
                 preg_match('/^['^?$%&*()}{@#~?><>,|=_+?]/', $password) ){

                 $upper_error="Password must have one capital letter and symbols . ";
                }
            }
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Validation</title>
    <link rel="stylesheet" href="style.css">


</head>
<body>

<div class="containers"> 
<form name="myForm" action="login.php" onsubmit="return validation()" method ="POST">
  <div class="imgcontainer">
    <img src="login.png" alt="login" class="logo">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="username" id="username" >
    <div id="nameErr">
      </div>
    <?php if(isset($user_error)): ?>
                <p><?php echo $user_error; ?></p>
                <?php endif; ?>

    <label for="psw"><b>Password</b></label>
    
    <input type="password" placeholder="Enter Password" id ="password" name="password" >
    <div id="passErr">
      </div>
    <?php if(isset($password_error)): ?>
                <p><?php echo $password_error; ?></p>
                <?php endif; ?>
                <?php if(isset($upper_error)): ?>
                <p><?php echo $upper_error; ?></p>
                <?php endif; ?>
    <button type="submit" name ="login">Login</button>

    <div id="userandpassword-message">
      </div>
    <?php if(isset($error_message)): ?>
    <p><?php echo $error_message; ?></p>
    <?php endif; ?>
    </div>
  </div>
  </form>
</div>

      <script>
function validation()
{
    
    var nameErr= "";
    var passErr= ""; 
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    
    
    if(username == "" && password == ""){
        document.getElementById("nameErr").innerHTML = " Please enter your username ";
        document.getElementById("passErr").innerHTML='Please enter your password';   
        return false;  
    } 

    if(username == ""){
        document.getElementById("nameErr").innerHTML ="Please enter your username";
    } 
       
    if(username.length<5 && password == "")
    {
        document.getElementById("nameErr").innerHTML="Username must be 5 characters long";
        document.getElementById("passErr").innerHTML='Please enter your password';   
        return false;     
    } else {
        document.getElementById("nameErr").innerHTML = "";
        document.getElementById("passErr").innerHTML = "";
    }

    if(username.length>5 && password == "")
    {
        document.getElementById("passErr").innerHTML='Please enter your password';   
        return false;
    }


    if(username.length>5 && password.length<10){
        document.getElementById("passErr").innerHTML='Password must be 10 characters long';
        return false; 
    }
    
    if(username.length>5 && password.length<10){
        document.getElementById("passErr").innerHTML='Password must be 10 characters long'; 
    }
    
    
    if(password== ""){
        document.getElementById("passErr").innerHTML='Please enter your password'; 
        return false;
    }
    
     
    
    if(username.length<5 && password.length<10){
        document.getElementById("nameErr").innerHTML="Username must be 5 characters long";
        document.getElementById("passErr").innerHTML='Password must be 10 characters long';
        return false;
    }
    

    
    
    let nameformat = /^[A-Za-z0-9_-]{5,}$/;
    if(nameformat.test(username) === false) {
        document.getElementById("passErr").innerHTML=' ';
        document.getElementById("nameErr").innerHTML = 'Please enter a valid name';
        return false;
    } 

    
    if(password.length<10){
        document.getElementById("nameErr").innerHTML = ' ';
        document.getElementById("passErr").innerHTML='Password must be 10 characters long';
        return false;
    } 

    
    var passformat= /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!@#$%^&*])(?=.{10,})/;
    if(passformat.test(password) === false){
        document.getElementById("nameErr").innerHTML = ' ';
        document.getElementById("passErr").innerHTML='Password must have at least one uppercase,one lowercase and a symbol';
        return false;
    }

    document.getElementById("nameErr").innerHTML = "";
    document.getElementById("passErr").innerHTML = "";
}
</script>


</body>
</html>

For the css : create style.css and paste the code

body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
*{
    text-decoration: none;
}

.containers{
    width: 50%;
    display: block;
    align-content: center;
    position: center;
    text-align: center;
    margin-left: 25%;
    margin-top: 5%;
}
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
p{
    color: red;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.logo {
  width: 10%;
  border-radius: 10%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

The overall design looks like :