Question

下面是服务器端和客户端验证表单。在这里，我使用.createCriteria("formApprovals","f",1,Restrictions.eq("f.latestApproval", status))来显示未能满足要求的错误消息。现在，div id=er> div将始终存在，导致我出现样式问题。我希望错误er仅在出现错误时出现，否则不会出现。

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>

但这不起作用可能是因为javascript也通过相同的<?php if ($er!=""){ echo "<div class='er'>".er."</div>"; } ?>显示错误，因此如何在错误时隐藏错误div。

Answer 1

如果没有错误，请隐藏该div。在＆＃39; er＆＃39; 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();
           }
     });
});

Answer 2

为空时为元素编写css选择器，并设置display：none

＆＃13;

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

＆＃13;

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

＆＃13;

你不需要处理任何其他事情，当你在JS中将内容设置为空时，它将消失

支持非常好，只在IE8 http://caniuse.com/#feat=css-sel3

中丢失

Answer 3

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

CSS：

#er {
  display:none;
}

然后，当发生错误时，您可以在JS中更改显示属性：

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

并设置错误消息：

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

如何在没有错误时隐藏“div”携带错误消息？

3 个答案: