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

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/[email protected]/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;
}

CodePudding user response：

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

CodePudding user response：

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;*/

CodePudding user response：

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">

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

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