如何檢查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/[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>

這是我的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;
}

uj5u.com熱心網友回復：

在我看來。我認為您不需要使用 javascript 來顯示/隱藏錯誤內容。您可以嘗試以下塊代碼：

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

uj5u.com熱心網友回復：

你那里有填充物。所以你可以嘗試移除班級徽章

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

或從該類中洗掉填充

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

uj5u.com熱心網友回復：

您可以使用客戶端方法（javascript）。

提交時檢測name欄位是否為空
如果是，則使 error1 訊息可見，否則使其不可見
如果您愿意，可以添加更多塊以進行進一步驗證
如果沒有進一步的錯誤，回傳真（提交）

所以改變

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366443.html

標籤：javascript php 验证展示

上一篇：clang/gcc不能將全域變數設定為一個地址常量加上另一個地址常量

下一篇：表單驗證反應