使用CSS顯示錯誤消息的提示框

正在網站上創建登錄表單，因此我無法在窗體頂部創建一個警告框，在用戶輸入的服務器端驗證和消毒後應顯示錯誤消息問題是，當頁面加載時，它顯示警告框，而我希望它只顯示錯誤消息時顯示。請協助？使用CSS顯示錯誤消息的提示框

HTML部分

<!DOCTYPE html> 
<html> 
<head> 
    <title>Login Form</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 

<div class="form"> 

<span class="info"> 
<?php 
     echo 
      $fNameErr; 
      $lNameErr; 
      $emailErr; 

?> 
</span> 


<br> 

    <ul class="tab-group"> 
     <li class="tab active"><a href="#signup">Sign Up</a></li> 
     <li class="tab"><a href="login.php">Log In</a></li> 
    </ul> 

<div class="tab-content"> 
<h1>Sign Up for Free</h1> 


       <form action="signup.php" method="post" autocomplete="off"> 

        <div class="top-row"> 
         <div class="field-wrap"> 
          <label> 
           <span class="req"></span> 
          </label> 
          <input placeholder="Firstname*" type="text" value="<?php echo $firstname;?>" required autocomplete="off" name='firstname' /> 
         </div> 

         <div class="field-wrap"> 
          <label> 
           <span class="req"></span> 
          </label> 
          <input placeholder="LastName*" type="text" value="<?php echo $lastname;?>" required autocomplete="off" name='lastname' /> 
         </div> 
        </div> 

        <div class="field-wrap"> 
         <label> 
          <span class="req"></span> 
         </label> 
         <input placeholder="Email Address*" type="email" value="<?php echo $email;?>" required autocomplete="off" name='email' /> 
        </div> 

        <div class="field-wrap"> 
         <label> 
          <span class="req"></span> 
         </label> 
         <input placeholder="Set A Password*" type="password"required autocomplete="off" name='password'/> 
        </div> 

        <button type="submit" class="button button-block" name="register">Register</button> 

       </form> 



</div> <!-- /form --> 
</div> 

</body> 
</html>

的style.css頁

.info { 
    color: pink; 
    display: block; 
    text-align: center; 
    padding: 5px; 
    margin-top: -20px; 
    margin-bottom: 15px; 
    border: 1px solid red; 
    background: #66131c; 
}

來源

2017-03-28 Martin

<span class="info"> 
<?php 
     echo 
      $fNameErr; 
      $lNameErr; 
      $emailErr; 

?> 
</span>

嘗試改變這下面。讓我知道如何去

<?php 
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){ 
    echo "<span class='info'>"; 
    echo $fNameErr . $lNameErr . $emailErr; 
    echo "</span>" 
} 
?>

來源

2017-03-28 11:24:58 noyanc

我已經改變它，它工作正常,,,非常感謝 – Martin

<?php 
    if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){ 
     echo '<span class="info">'; 
     echo $fNameErr; 
     echo $lNameErr; 
     echo $emailErr; 
     echo '</span>'; 
    } 
?>

嘗試。如果它不工作，告訴我們你的PHP代碼太

來源

2017-03-28 11:22:54 newbie

我覺得也是'的 ...'必須是有條件可見/隱藏，現在它會顯示一個空框（如果'.info'被風格像一個盒子） – TuomasK

更新了我的答案 – newbie

我假設你只希望這顯示當這些變量具有某種價值，他們原本將是空白的。如果是這種情況，只輸出這個HTML元素將會非常容易。也許是這樣的：

<?php if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){ 
    echo 
    "<span class='info'>" 
    $fNameErr; 
    $lNameErr; 
    $emailErr; 
    "</span>"; 
} ?>

來源

2017-03-28 11:26:00

使用CSS顯示錯誤消息的提示框

回答

相關問題