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>
Advertisement
Answer
I finally know why.
$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!