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

我构建了一个简单的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;
}

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

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

这里有填充。所以你可以试着移除班级徽章

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

或者从该类中删除填充

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

您可以使用客户端方法(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>

相关内容

最新更新

热门标签：