How to check if content of an html element is empty?

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

Answer

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

Advertisement

Answer