如何在沒有錯誤時隱藏`div`攜帶錯誤信息？

下面是服務器端和客戶端驗證表單。在這裏，我使用div id=er>顯示錯誤消息未能符合要求。現在diver將永遠在那裏造成我的造型問題。我希望錯誤div僅在出現錯誤時纔會顯示，否則不會顯示。如何在沒有錯誤時隱藏`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時，他們是沒有錯誤。

來源

2015-12-24 bɪˈɡɪnə

把一個如果圍繞格？如果它顯示錯誤，如果它不是，那麼它不會 – Tredged

因此將其設置爲不顯示任何內容。如果有錯誤，請點擊它。 – epascarello

寫元素爲空時的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你設定的內容沒有什麼，它就會消失

的支持是相當不錯的，只是在IE8丟失http://caniuse.com/#feat=css-sel3

來源

2015-12-24 15:17:49 vals

感謝您的回答是快速解決方案，只是想知道是否所有瀏覽器支持「空」屬性？ –

我已經添加了一個關於它的鏈接。很高興它幫助！ – vals

如果沒有錯誤，請隱藏該div。在 'er' DIV，寫style='display:none'

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

這裏，如果錯誤。顯示該div。 Otheriwse隱藏那個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(); 
      } 
    }); 
});

來源

2015-12-24 14:28:36

您可以將錯誤div的顯示設置爲無。這將從DOM中取出元素，就好像它從不存在一樣。

CSS：

#er { 
    display:none; 
}

然後在發生錯誤時，你可以在JS改變顯示屬性：

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

，並設置錯誤消息：

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

來源

2015-12-24 14:33:53 jsdeveloper

如何在沒有錯誤時隱藏`div`攜帶錯誤信息？

回答

相關問題