如何检查html元素的内容是不是为空?

Posted

技术标签:

【中文标题】如何检查html元素的内容是不是为空?【英文标题】:How to check if content of an html element is empty?如何检查html元素的内容是否为空? 【发布时间】:2022-01-04 04:39:45 【问题描述】:

我正在构建一个简单的 php 登录表单,其中包含必填字段和验证。无论必填字段,我都想为每个未填写的输入元素显示一条错误消息。但我在途中遇到了一个问题。当 span 元素中没有内容时,我用于样式的 span 元素不会消失。我写了一些 javascript 代码,但它不起作用。我希望 span 元素在没有内容时隐藏,因为 $nameerr 在开始时等于 ""。当$nameerr 等于"Name Required" 字符串时,span 元素应该只在当时可见。如何实现?

注意:我只想在实现其他变量之前先测试$name$nameerr,所以其他变量是""

这是我的 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>

这是我的 validate.php 文件:

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

【问题讨论】:

如果你只想在元素为空时隐藏它,你可以在css中使用:empty吗? 【参考方案1】:

您可以使用客户端方法 (javascript)。

    在提交时检测名称字段是否为空 如果是,则使 error1 消息可见,否则使其不可见 如果您愿意,可以添加更多块以进行进一步验证 如果没有其他错误,返回 true(提交)

所以改变

<form action="<?php  $_SERVER['PHP_SELF'];  ?>" method="post">

<form action="<?php  $_SERVER['PHP_SELF'];  ?>" method="post"  onsubmit="return validateform();">

改变

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

并添加以下内容:


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

【讨论】:

【参考方案2】:

你在那里有填充。 所以你可以尝试移除班级徽章

<span class="bg-danger float-end" id="error1">
                                <?php echo $nameerr;  ?>
                            </span>

或从该类中删除填充

.badge 
display: inline-block;
/* padding: 0.35em 0.65em;*/

【讨论】:

【参考方案3】:

在我看来。我认为您不需要使用 javascript 来显示/隐藏错误内容。 你可以试试下面的代码块:

<?php if(!empty($nameerr)): ?>
       <span class="badge bg-danger float-end" id="error1">
            <?php echo $nameerr;  ?>
       </span>
<?php endif; ?>

【讨论】:

以上是关于如何检查html元素的内容是不是为空?的主要内容,如果未能解决你的问题,请参考以下文章

html 角度检查对象为空以显示/隐藏元素

如何检查 HTML 元素是不是隐藏? [复制]

在 JavaScript 中如何检查 html 元素是不是存在?

你怎么检查drupal 8中的字段是否为空?

检查数组o html元素是不是具有以下某些类[重复]

检查是不是正在播放 HTML5 视频元素