How to check if content of an html element is empty?
Question
I was building a simple PHP login form that contains both required fields and validation. regardless required fields, I want to display an error message for each input element that had not been filled. But I come across a problem on the way. The span element I use for styling does not disappear when there is no content in the span element. I wrote some javascript code and it did not work. I want the span element to hide when there is no content because the $nameerr equals to "" at the start. When the $nameerr equals to "Name Required" string, the span element should be visible only at the time. How to achieve that?
Note: I only want to test for $name and $nameerr first before implementing other variables, So other variable is "" .
Here is my code for php:
<?php include('validate.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning PHP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row justify-content-center" style="height:auto;background-color:#ffcb05;">
<div class="col-lg-4" style="background-color:#fcd670;">
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
<div class="d-flex flex-column">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your name" style="width:100%;">
<span class="badge bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Please enter your e-mail" style="width:100%;">
</div>
<div class="mb-3">
<label for="website" class="form-label">Website</label>
<input type="url" name="website" id="website" class="form-control" placeholder="Please enter your website" style="width:100%;">
</div>
<div class="mb-3">
<label for="comment">Comment</label>
<textarea name="comment" id="comment" cols="45" rows="5" class="form-control"></textarea>
</div>
<div class="mb-3">
<label>Gender</label>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other">
</div>
<div class="mb-3">
<button class="btn btn-primary float-end" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
var content=document.getElementById('error1').innerHTML;
if(content==""){
document.getElementById('error1').style.display="none";
}else{
ocument.getElementById('error1').style.display="block";
}
</script>
</body>
</html>
Here is my validate.php file:
<?php
$name=$email=$website=$comment=$gender='';
$nameerr=$emailerr=$websiteerr=$commenterr=$gendererr='';
if($_SERVER["REQUEST_METHOD"]=="POST"){
if(empty($_POST['name'])){
$nameerr="Name Required";
}else{
$name=validateInput($_POST["name"]);
$email=validateInput($_POST["email"]);
$website=validateInput($_POST["website"]);
$comment=validateInput($_POST["comment"]);
$gender=validateInput($_POST["gender"]);
echo $name."<br>".$email."<br>".$website."<br>".$comment."<br>".$gender."<br>";
}
}
function validateInput($data){
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
}
3 answers
solution1
0 2021-11-26 03:05:19
In my opinion. I think you don't need to use javascript to show/hide error content. You can try below block code:
<?php if(!empty($nameerr)): ?>
<span class="badge bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
<?php endif; ?>
solution2
0 2021-11-26 03:06:41
You have padding there. so you can try removing the class badge
<span class="bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
or remove the padding from that class
.badge {
display: inline-block;
/* padding: 0.35em 0.65em;*/
solution3
0 2021-11-26 03:20:48
You may use a client side approach (javascript).
- Detect on submit whether the name field is empty
- If yes, make the error1 message visible, else make it not visible
- Add more blocks for further validation, if you wish
- If no further errors, return true (to submit)
So change
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
to
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateform();">
and change
<span class="badge bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
to
<span class="badge bg-danger float-end" id="error1" style="display:none;">
Name Required !!!!
</span>
and add the following:
<script>
function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,'');
}
function validateform() {
if(myTrim(document.getElementById('name').value)==""){
document.getElementById('error1').style.display="block";
return false;
}else{
document.getElementById('error1').style.display="none";
}
// if no errors at all
return true;
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.