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