Can someone tell me why the line returns nothing (empty) instead of Too long. when I enter a password which ...

PHP echo not returning correctly

Can someone tell me why the <?php echo $userPasswordError; ?> line returns nothing (empty) instead of <div class="invalid-feedback">Too long.</div> when I enter a password which contain more than 1 character with the below code ?

If I change this line : $userPasswordError = '<div class="invalid-feedback">Too long.</div>';

with this $userPasswordError = 'Too long.'; , it works ! Output is “Too long.”.

<?php
$user = $userPassword = '';
$userError = $userInvalid = $userPasswordError = $userPasswordInvalid = '';
$isvalidOrInvalidUser = $isvalidOrInvalidUserPassword = '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // Verify username.
  if (!empty($_POST["user"])) {
    if (strlen($_POST["user"]) <= 32) {
      $user = $_POST["user"];
      $userError = '<div class="valid-feedback">Correct.</div>';
      $isvalidOrInvalidUser = 'is-valid';
    }
    else {
      $userInvalid = $_POST["user"];
      $userError = '<div class="invalid-feedback">Too long.</div>';
      $isvalidOrInvalidUser = 'is-invalid';
    }
  }
  else {
    $userError = '<div class="invalid-feedback">Please, add username.</div>';
    $isvalidOrInvalidUser = 'is-invalid';
  }
  // Verify password.
  if (!empty($_POST["userpassword"])) {
    if (strlen($_POST["userpassword"]) <= 1) {
      $userPassword = $_POST["userpassword"];
      $userPasswordError = '<div class="valid-feedback">Correct.</div>';
      $isvalidOrInvalidUserPassword = 'is-valid';
    }
    else {
      $userPasswordInvalid = $_POST["userpassword"];
      $userPasswordError = '<div class="invalid-feedback">Too long.</div>';
      $isvalidOrInvalidUserPasword = 'is-invalid';
    }
  }
  else {
    $userPasswordError = '<div class="invalid-feedback">Please, add password.</div>';
    $isvalidOrInvalidUserPassword = 'is-invalid';
  }
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <div class="form-row">
    <div class="col-md-3 mb-3">
      <label for="user">Username :</label>
      <input type="text" class="form-control <?php echo $isvalidOrInvalidUser; ?>" id="user" name="user" placeholder="User here" value="<?php echo $user.$userInvalid; ?>">
      <?php echo $userError; ?>
    </div>
    <div class="col-md-3 mb-3">
      <label for="userpwd">User password :</label>
      <input type="password" class="form-control <?php echo $isvalidOrInvalidUserPassword; ?>" id="userpassword" name="userpassword" value="<?php echo $userPassword.$userPasswordInvalid; ?>">
      <?php echo $userPasswordError; ?>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Add</button>
</form>
</body>
</html>

JavaScript
​x
 
<?php$user = $userPassword = '';$userError = $userInvalid = $userPasswordError = $userPasswordInvalid = '';$isvalidOrInvalidUser = $isvalidOrInvalidUserPassword = '';if ($_SERVER["REQUEST_METHOD"] == "POST") {  // Verify username.  if (!empty($_POST["user"])) {    if (strlen($_POST["user"]) <= 32) {      $user = $_POST["user"];      $userError = '<div class="valid-feedback">Correct.</div>';      $isvalidOrInvalidUser = 'is-valid';    }    else {      $userInvalid = $_POST["user"];      $userError = '<div class="invalid-feedback">Too long.</div>';      $isvalidOrInvalidUser = 'is-invalid';    }  }  else {    $userError = '<div class="invalid-feedback">Please, add username.</div>';    $isvalidOrInvalidUser = 'is-invalid';  }  // Verify password.  if (!empty($_POST["userpassword"])) {    if (strlen($_POST["userpassword"]) <= 1) {      $userPassword = $_POST["userpassword"];      $userPasswordError = '<div class="valid-feedback">Correct.</div>';      $isvalidOrInvalidUserPassword = 'is-valid';    }    else {      $userPasswordInvalid = $_POST["userpassword"];      $userPasswordError = '<div class="invalid-feedback">Too long.</div>';      $isvalidOrInvalidUserPasword = 'is-invalid';    }  }  else {    $userPasswordError = '<div class="invalid-feedback">Please, add password.</div>';    $isvalidOrInvalidUserPassword = 'is-invalid';  }}?><!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></head><body><form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">  <div class="form-row">    <div class="col-md-3 mb-3">      <label for="user">Username :</label>      <input type="text" class="form-control <?php echo $isvalidOrInvalidUser; ?>" id="user" name="user" placeholder="User here" value="<?php echo $user.$userInvalid; ?>">      <?php echo $userError; ?>    </div>    <div class="col-md-3 mb-3">      <label for="userpwd">User password :</label>      <input type="password" class="form-control <?php echo $isvalidOrInvalidUserPassword; ?>" id="userpassword" name="userpassword" value="<?php echo $userPassword.$userPasswordInvalid; ?>">      <?php echo $userPasswordError; ?>    </div>  </div>  <button class="btn btn-primary" type="submit">Add</button></form></body></html>​

Answer

I finally know why.

  $userPasswordError = '<div class="invalid-feedback">Too long.</div>';
  $isvalidOrInvalidUserPasword = 'is-invalid';

JavaScript
 
  $userPasswordError = '<div class="invalid-feedback">Too long.</div>';  $isvalidOrInvalidUserPasword = 'is-invalid';​

The variable name of isvalidOrInvalidUserPasword is wrong, it should be $isvalidOrInvalidUserPassword (missing an s at Pasword).

If the input does not have class is-invalid, the error message will not visible!

Hope this helps!

Advertisement

Answer