没有错误时如何隐藏带有错误消息的`div`？答案

【问题标题】：How to hide `div` carrying error message when there is no error?没有错误时如何隐藏带有错误消息的`div`？
【发布时间】：2016-03-30 23:34:08
【问题描述】：

以下是服务器端和客户端验证表单。在这里，我使用div id=er> 来显示不符合要求的错误消息。现在diver 将一直存在，导致我出现样式问题。我希望错误div 仅在出现错误时出现，否则不出现。

<script type="text/javascript">
    $(document).ready(function() {
    $('#submit').click(function() {
            var firstname = document.getElementById('fn').value;
            var lastname = document.getElementById('ln').value;
            var password = document.getElementById('pswd').value;
     if (firstname.length < 2 || firstname.length > 11) {
     $('#er').html('First name must be between 1 to 11 characters long');
     return false;
     }
     else if (lastname.length < 2 || lastname.length > 11) {
     $('#er').html('Last name must be between 1 to 11 characters long');
     return false;
     }
     else if (password == "") {
     $('#er').html('Fill your password');
     return false;
     }
     });
     });
</script>

<?php
error_reporting('E_ALL ^ E_NOTICE');
if(isset($_POST['reg'])){
$fn = ucfirst($_POST['fname']);
$ln = ucfirst($_POST['lname']);
$pswd = $_POST['password'];

if( strlen($fn) < 2 || strlen($fn) > 11 ) {
  $er = 'First name should be 2 to 11 characters long';
}
elseif( strlen($ln) < 2 || strlen($ln) > 11 ) {
  $er = 'Last name should be 2 to 11 characters long';
}
elseif( $pswd == "" ) {
  $er = 'Enter your password';
}
else{
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (first_name,last_name,password) VALUES (:first_name,:last_name,:password)");  
$stmt->execute( array(':first_name'=>$fn,':last_name'=>$ln,':password'=>$pswd));
} 

<form action="register.php" method="post" class="register">
    <input type="text" name="fname" id="fn" placeholder="First Name"/>
    <input type="text" name="lname" id="ln" placeholder="Last Name"/>
    <input type="password" name="password" id="pswd" placeholder="Password"/>
    <input type="submit" id="submit" name="reg" value="Create">
 <div id='er'><?php echo $er; ?></div>
</form>

试过这样的

<?php
 if ($er!=""){
 echo "<div class='er'>".er."</div>";
 }
 ?>

但这不起作用可能是因为 javascript 也通过相同的div 显示错误，所以当它们没有错误时如何隐藏错误div。

【问题讨论】：

在 div 周围加上 if ？如果有错误显示，如果没有则不显示
所以设置为不显示。出现错误时显示。

标签： javascript php jquery css validation

【解决方案1】：

如果没有错误，隐藏那个 div。在'er'div中，写style='display:none'

  <div id='er' style='display:none'><?php echo $er; ?></div>

这里，如果错误。显示那个 div。否则隐藏该 div。

$(document).ready(function() {
    $('#submit').click(function() {
          var firstname = document.getElementById('fn').value;
          var lastname = document.getElementById('ln').value;
          var password = document.getElementById('pswd').value;
           if (firstname.length < 2 || firstname.length > 11) {
                $('#er').show();
                $('#er').html('First name must be between 1 to 11 characters long');
                return false;
           }
           else if (lastname.length < 2 || lastname.length > 11) {
                $('#er').show();
                $('#er').html('Last name must be between 1 to 11 characters long');
                return false;
           }
           else if (password == "") {
                $('#er').show();
                $('#er').html('Fill your password');
                return false;
           }
           else {
                $('#er').hide();
           }
     });
});

【讨论】：

【解决方案2】：

为空的元素写一个css选择器，并设置显示：无

div {
    background-color: lightblue;
  margin: 10px;
  display: inline-block;
  height: 20px;
}

.demo:empty {
    display: none;  
}

<div class="demo">One</div>
<div class="demo"></div>
<div class="demo">Other</div>

其他什么都不需要，在JS中设置内容为空时，它就会消失

支持挺好的，只缺IE8http://caniuse.com/#feat=css-sel3

【讨论】：

感谢您的回答是快速解决方案，只是想知道所有浏览器都支持empty属性吗？
我已经添加了一个关于它的链接。很高兴它有帮助！

【解决方案3】：

您可以将错误 div 的显示设置为无。这会将元素从 DOM 中取出，就好像它从未存在过一样。

CSS：

#er {
  display:none;
}

那么当出现错误时，可以在JS中更改显示属性：

$('#er').css("display","block");

并设置错误信息：

$('#er').html('First name must be between 1 to 11 characters long');

【讨论】：