Как скрыть сообщение об ошибке `div`, когда нет ошибки?

Question

Ниже представлена ​​форма проверки на стороне сервера и на стороне клиента. Здесь я использую 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 при их отсутствии ошибок.

Answer 1

Написать 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

Answer 2

Если нет ошибки, скройте этот 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(); 
      } 
    }); 
}); 

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');