Positioning the validation error message

Question

I have this login form which looks like this:

When I enter a wrong information, it would look like this:

Now the problem is that when I get the error, it moves my login form down.

Is there anyway I could prevent the form from moving when I get the error message? Also maybe I could put the error message below the form but I don't know how to, I tried echoing the error below the form but it didn't work.

Here's my PHP:

<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info@vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();

//Include the database connection file
include "database_connection.php";

//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
    //Variables Assignment
    $username = trim(strip_tags($_POST['username']));
    $user_password = trim(strip_tags($_POST['passwd']));


    $validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");

    //Validate against empty fields
    if($username == "" || $user_password == "")
    {
        $error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
    }
    elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
    {
        //The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
        $get_user_information = mysql_fetch_array($validate_user_information);
        $_SESSION["VALID_USER_ID"] = $username;
        $_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
        header("location: home.php");
    }
    else
    {
        //The submitted info the user are invalid therefore, display an error message on the screen to the user
        $error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
        echo $error;
    }

}
?>

Here's my HTML:

body {
  background-image: url(img/hero.jpg);
  background-size: cover;
  font-family: Montserrat;
}

.logo {
  width: 400px;
  height: 200px;
  background-image: url(img/corelogo.png);
  background-size: cover;
  margin: -20px auto;
}

.login-block {
  width: 320px;
  padding: 20px;
  background: transparent;
  border-radius: 5px;
  border-top: 5px solid #011f4b;
  margin: 0 auto;
  font-family: Questrial;
}

.login-block h1 {
  text-align: center;
  color: #000;
  font-size: 18px;
  text-transform: capitalize;
  letter-spacing: 2px;
  margin-top: 0;
  margin-bottom: 20px;
}

.login-block input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: Questrial;
  letter-spacing: 2px;
  padding: 0 20px 0 50px;
  outline: none;
}

.login-block input#username {
  background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
  background-size: 16px 80px;
}

.login-block input#username:focus {
  background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
  background-size: 16px 80px;
}

.login-block input#password {
  background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
  background-size: 16px 80px;
}

.login-block input#password:focus {
  background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
  background-size: 16px 80px;
}

.login-block input:active,
.login-block input:focus {
  border: 1px solid #011f4b;
}

.login-block button {
  width: 100%;
  height: 40px;
  background: #011f4b;
  box-sizing: border-box;
  border-radius: 5px;
  border: 0px solid #1293e1;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  font-family: Questrial;
  letter-spacing: 2px;
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.login-block button:hover {
  background: #1293e1;
}

<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<center>
  <div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />


  <!-- Code Begins -->

  <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <div class="logo"></div>
  <div class="login-block">
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <h1>Employee Login</h1>
      <input type="text" value="" placeholder="Username" id="username" name="username" required />
      <input type="password" value="" placeholder="Password" id="password" name="passwd" required />
      <input type="hidden" name="submitted" id="submitted" value="yes">
      <button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
    </form>
    <a href="index.php"><button>Back</button></a>
  </div>

  <!-- Code Ends -->

**Never store plain text passwords!** Please use ***PHP's [built-in functions](http://jayblanchard.net/proper_password_hashing_with_PHP.html)*** to handle password security. If you're using a PHP version less than 5.5 you can use the `password_hash()` [compatibility pack](https://github.com/ircmaxell/password_compat). ***It is not necessary to [escape passwords](http://stackoverflow.com/q/36628418/1011527)*** or use any other cleansing mechanism on them before hashing. Doing so *changes* the password and causes unnecessary additional coding. — Jay Blanchard, Oct 04 '17 at 12:11
***Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php).*** [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Oct 04 '17 at 12:11
[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)***. Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! — Jay Blanchard, Oct 04 '17 at 12:11

score 1 · Accepted Answer · answered Oct 03 '17 at 16:28

1

Basically try this:

.info {position: absolute; }

answered Oct 03 '17 at 16:28

DaFois

2,197
8
26
43

score 0 · Answer 2 · edited Oct 04 '17 at 18:13

1st Remove echo $error in the Code:

 $error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
    //echo $error;

2nd Add this Code at the top of form tag in html

<?php
if(isset($error) && isset($_POST['submit'])){

echo $error;

}

?>

<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info@vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();

//Include the database connection file
include "database_connection.php";

//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
  //Variables Assignment
  $username = trim(strip_tags($_POST['username']));
  $user_password = trim(strip_tags($_POST['passwd']));


  $validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");

  //Validate against empty fields
  if($username == "" || $user_password == "")
  {
    $error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
  }
  elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
  {
    //The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
    $get_user_information = mysql_fetch_array($validate_user_information);
    $_SESSION["VALID_USER_ID"] = $username;
    $_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
    header("location: home.php");
  }
  else
  {
    //The submitted info the user are invalid therefore, display an error message on the screen to the user
    $error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
    //echo $error;
  }

}
?>


<!DOCTYPE html>
<html>
<head>

  <link rel="shortcut icon" href="img/favicon.ico" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CORE INTRANET</title>

  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
  <!-- Required header file -->
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">




</head>
<style>

  body {
    background-image: url(img/hero.jpg);
    background-size: cover;
    font-family: Montserrat;
  }

  .logo {
    width: 400px;
    height: 200px;
    background-image: url(img/corelogo.png);
    background-size: cover;
    margin: -20px auto;
  }

  .login-block {
    width: 320px;
    padding: 20px;
    background: transparent;
    border-radius: 5px;
    border-top: 5px solid #011f4b;
    margin: 0 auto;
    font-family: Questrial;
  }

  .login-block h1 {
    text-align: center;
    color: #000;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .login-block input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 14px;
    font-family: Questrial;
    letter-spacing: 2px;
    padding: 0 20px 0 50px;
    outline: none;
  }

  .login-block input#username {
    background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
    background-size: 16px 80px;
  }

  .login-block input#username:focus {
    background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
    background-size: 16px 80px;
  }

  .login-block input#password {
    background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
    background-size: 16px 80px;
  }

  .login-block input#password:focus {
    background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
    background-size: 16px 80px;
  }

  .login-block input:active, .login-block input:focus {
    border: 1px solid #011f4b;
  }

  .login-block button {
    width: 100%;
    height: 40px;
    background: #011f4b;
    box-sizing: border-box;
    border-radius: 5px;
    border: 0px solid #1293e1;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    font-family: Questrial;
    letter-spacing: 2px;
    outline: none;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .login-block button:hover {
    background: #1293e1;
  }

</style>
<body>
<center>
<div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />


<!-- Code Begins -->

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="logo"></div>
<div class="login-block">

<?php
if(isset($error) && isset($_POST['submit'])){

echo $error;

}

?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <h1>Employee Login</h1>
    <input type="text" value="" placeholder="Username" id="username" name="username" required />
    <input type="password" value="" placeholder="Password" id="password" name="passwd" required />
  <input type="hidden" name="submitted" id="submitted" value="yes">
    <button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
</form>
  <a href="index.php"><button>Back</button></a>
</div>

<!-- Code Ends -->



</center>
</body>
</html>

Who down the vote may I know the reasons .behind down votes !! If any one wants to take an revenge dining then fine !! No problem — RïshïKêsh Kümar, Oct 04 '17 at 16:15

Positioning the validation error message

2 Answers2