php - 如果不显示错误，如何不允许错误消息占用 DOM 中的空间？

Question

我有一个简单的登录页面，其中显示身份验证失败的错误消息。我有一个应用了一些类的 div，在其中我通过 <label.../> 显示错误消息.

现在第一次加载页面时，显然没有错误信息，因此留下了空白。

我想要的是，如果没有错误消息，div 应该不占用空间或应该被隐藏，并且应该只在 div 中有任何文本(错误消息)时显示。

这是我的 HTML :

<form id="login-form" action="authenticate.php" method="post" role="form" style="display: block;">
    <div class="form-group">
        <input type="text" name="login_email" id="login_email" tabindex="1" class="form-control" placeholder="Email" value="">
    </div>
    <div class="form-group">
        <input type="password" name="login_password" id="login_password" tabindex="2" class="form-control" placeholder="Password">
    </div>
    <div class="form-group text-center">
         <label style="color:red"><?php if(isset($error)) echo $error; ?></label>
    </div>
    <div class="form-group text-center">
          <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
          <label for="remember"> Remember Me</label>
    </div>
 <div class="form-group">
    <div class="row">
          <div class="col-sm-6 col-sm-offset-3">
                <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
          </div>
    </div>
    </div>
    <div class="form-group">
          <div class="row">
                <div class="col-lg-12">
                    <div class="text-center">
                        <a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
                    </div>
                </div>
            </div>
    </div>
</form>

PHP 代码:

<?php
if(isset($_GET['login_error'])){
        if($_GET['login_error']== 'true'){
            $error = "Email and/or Password was incorrect! Please try again!";
        }   
    }
?>

Answer 1

更改它以便调用 php 函数中的所有 HTML。像这样

<?php
if(isset($_GET['login_error'])){
        if($_GET['login_error']== 'true'){
            $error = '<div class="form-group text-center">';
            $error .= '<label style="color:red">Email and/or Password was incorrect! Please try again!</label>';
            $error .= '</div>';
        }   
    }
?>

<form id="login-form" action="authenticate.php" method="post" role="form" style="display: block;">
    <div class="form-group">
        <input type="text" name="login_email" id="login_email" tabindex="1" class="form-control" placeholder="Email" value="">
    </div>
    <div class="form-group">
        <input type="password" name="login_password" id="login_password" tabindex="2" class="form-control" placeholder="Password">
    </div>

    <!-- ERROR MESSAGE IS HERE -->
    <?php if(isset($error)) echo $error; ?>

    <div class="form-group text-center">
          <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
          <label for="remember"> Remember Me</label>
    </div>
 <div class="form-group">
    <div class="row">
          <div class="col-sm-6 col-sm-offset-3">
                <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
          </div>
    </div>
    </div>
    <div class="form-group">
          <div class="row">
                <div class="col-lg-12">
                    <div class="text-center">
                        <a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
                    </div>
                </div>
            </div>
    </div>
</form>