Below is a server side and client side validation form. Here I am using div id=er> for showing error messages on failing to ply with requirements. Now the div er will be always there causing me styling problems. I want error div to appear only when there is error and not otherwise.

<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>

Tried something like this

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

But this did not work may be because javascript too shows error through same div so how to hide error div when their is no error.

Below is a server side and client side validation form. Here I am using div id=er> for showing error messages on failing to ply with requirements. Now the div er will be always there causing me styling problems. I want error div to appear only when there is error and not otherwise.

<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>

Tried something like this

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

But this did not work may be because javascript too shows error through same div so how to hide error div when their is no error.

• javascript
• php
• jquery
• css
• validation

• Put an if around the div? if it errors show, if it not it doesn't – Tredged Commented Dec 24, 2015 at 14:25
• So set it to display none. SHow it if there is an error. – epascarello Commented Dec 24, 2015 at 14:28

3 Answers 3

If no error , hide that div. In 'er' div, write style='display:none'

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

Here, if error. Show That div. Otheriwse hide that 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();
           }
     });
});

Write a css selector for the element when empty, and set display : none

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>

You don't need to take care of anything else, when in JS you set the content to nothing, it will disappear

Support is quite good, only missing in IE8 http://caniuse./#feat=css-sel3

You can set the error div's display to none. This will take the element out of the DOM as if it was never there.

CSS:

#er {
  display:none;
}

Then when an error occurs, you can change the display property in JS:

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

and set the error message:

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