Display error message same page in same css class

Question

I need some help displaying error message the same page after submit. At this moment, after submit it cleans the forms from the page, then display a nothing at the position of the form.

PHP:

<?php
    $login_error_text="";
header('Content-type: text/html; charset=UTF-8');   
echo "<!DOCTYPE HTML>";
echo "<html>";
echo "<head>";
echo '    <link rel="stylesheet" href="t4.css">';
echo "</head>";
echo '<body>';
echo '<div class="login_form">';
echo '<p class="login_text">Please login to application</p>';
echo '  <form action="'.htmlspecialchars($_SERVER["PHP_SELF"]).'" method="post" name="auth_form">';
echo '    <input type="text" name="username" placeholder="Username" autocomplete="off">';
echo '    <input type="password" name="password" placeholder="Password" autocomplete="off">';
echo '    <p id="login_error">'.$login_error_text.'</p>';
echo '    <input type="submit" name="loginbutton" value="Login">';
echo "  </form>";
echo '</div>';

if (isset($_POST['loginbutton'])) {
    if (empty($_POST['username']) || empty($_POST['password'])) {

    echo '<div class="login_form">';
    echo     '<script>document.getElementById("login_error").style.visibility="visible";    </script>';
    $login_error_text="Empty username or password";
    echo '<p id="login_error">'.$login_error_text.'</p>';
    echo '</div>';
    }
} 
echo "</body>";
echo "</html>";
?>

CSS:

body 
{
   margin: 0px;
}

.login_form {
  float: left;
  position: absolute;
  top: 30%;
  left: 30%;
   padding: 40px;
  width: 400px;
  height: 300px;
  margin: auto;
  background-color: #efefef;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
  overflow: hidden;
}

.login_text {
   position: relative;re
   text-align: center;
    color: black;
    font-size: xx-large;
    font-weight: bold;
}

.login_form input[type=text] {
   position: relative;
  height: 45px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
   background: #fff;
  border: 1px solid #d5d5d5;
  border-top: 1px solid #a0a0a0;
   padding: 0 8px;
  box-sizing: border-box;
}

.login_form input[type=password] {
   position: relative;
  height: 45px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
   background: #fff;
  border: 1px solid #d5d5d5;
  border-top: 1px solid #a0a0a0;
  padding: 0 8px;
  box-sizing: border-box;
}

.login_form #login_error  {
   position: relative;
   font-size: 16px;
   visibility: hidden;
  height: 35px; 
 top: 140px;  
}

.login_form input[type=submit] {
  position: relative;
  width: 100%;
  color: #ffffff; 
  text-shadow: 0 1px rgba(0,0,0,0.5); 
  background-color: red;
  text-align: center;
  height: 36px;
  padding: 0 10px;
}

This my form, i marked where I want to display the form: https://i.sstatic.net/OAEdw.jpg

But after submitting, everything disapper: https://i.sstatic.net/4rK4J.jpg

Could you help me to find what is the problem ?

Does that show your form if you remove the space or better, remove .login_form from the statement. Since IDs must be unique, just have #login_error { visibility: hidden; — mplungjan
– mplungjan, Commented Mar 1, 2016 at 17:36

Shashank Shah · Accepted Answer · 2016-03-01 17:37:29Z

1

All issues are with your css only!

Your form is dis-appear because of background-color: #efefef; remove it from .login_form { css and also remove visiblity hidden from .login_form #login_error and replace your css for login_form #login_error like this..

.login_form #login_error {
    color: red;
    font-size: 16px;
    height: 35px;
    position: relative;
    top: 212px;
    color: red;
}

looks something like this.

Hope it helps!

answered Mar 1, 2016 at 17:37

Shashank Shah

2,1774 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shashank Shah Over a year ago

@Tass Mark I've pointed out css changes ! please do it and let me know if any issues further!

Tass Mark Over a year ago

Shashank Shah: it is working, thank you very very much !

Collectives™ on Stack Overflow

Display error message same page in same css class

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related