php - 在提交 php 表单之前显示 css 类

Question

我正在处理一个联系表单，如果某些字段留空，它会吐出一些错误，如果表单提交成功，用户将看到一条成功消息。

目前我有一个错误类和一个成功类 - 这些如下:

.errors {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    padding: 7px 5px;
    color: #A94442;
    font-weight: 400;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #EBCCD1;
    background-color: #F2DEDE;
    margin: 0 0 10px 0;
}

.success {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    padding: 7px 5px;
    color: #3C763D;
    font-weight: 400;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #D6E9C6;
    background-color: #DFF0D8;
    margin: 0 0 10px 0;
}

就 php 验证而言，错误/成功消息按预期工作，但我遇到的问题是，当用户最初进入联系页面时，这些类的背景颜色和边框显示为空白。

您可以在这里访问页面 Contact Page通过查看页面，您会立即看到问题。

请你给我一些关于如何隐藏这些直到需要它们的建议/建议？我可以从类中删除背景颜色和边框，只保留文本，但理想情况下我希望保持样式不变。

这是与之配套的 php 以及 html 表单

$errors = array();
$success = "";
$name = "";
$email = "";
$website = "";
$budget = "";
$message = "";

if (isset($_POST['contact_submit'])) {

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }

    if (isset($_POST['email'])) {
        $email = $_POST['email'];
    }

    if (isset($_POST['website'])) {
        $website = $_POST['website'];
    }

    if (isset($_POST['budget'])) {
        $budget = $_POST['budget'];
    }       

    if (isset($_POST['message'])) {
        $message = $_POST['message'];
    }

    if (empty($name)) {
        $errors[] = "Please enter your name.";
    }

    if (empty($email)) {
        $errors[] = "Please enter a valid email address.";
    }   

    elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Please enter a valid email address.";
    }

    if (empty($message)) {
        $errors[] = "Don't forget your message!";
    }       

    if (count($errors) == 0) {

        $headers  = "From: email here...\r\n";
        $headers .= "Content-type: text/html\r\n";
        $myaddress = "email here...";
        $subject = "Website Enquiry";
        $emailmessage = "<b><u>Name:</u></b><br>$name<br><br><b><u>Email:<br></u></b>$email<br><br><b><u>Message:<br></u></b> $message";

        if (!mail($myaddress, $subject, $emailmessage, $headers)) {
            $errors[] = "A problem occurred sending your email.";
        }

        else {
            $success = "Your message was sent successfully!";
            $name = "";
            $email = "";
            $message = "";
        }

    }

}


                <form method="POST" action="">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <?php echo "<div class=\"errors\">" . implode("<br>", $errors) . "</div>"; ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <?php echo "<div class=\"success\">" . $success . "</div>"; ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <input type="text" name="name" placeholder="Your Name &#42;" value="<?php echo htmlentities($name); ?>">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <input type="text" name="email" placeholder="Your Email &#42;" value="<?php echo htmlentities($email); ?>">
                        </div>                          
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <input type="text" name="website" placeholder="Website (optional)" value="<?php echo htmlentities($website); ?>">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <input type="text" name="budget" placeholder="Budget (optional)" value="<?php echo htmlentities($budget); ?>">
                        </div>                          
                    </div>      
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <textarea type="text" name="message" placeholder="Your Message &#42;"><?php echo htmlentities($message); ?></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <button type="submit" name="contact_submit" class="btn-one">Send</button>
                        </div>
                    </div>
                </form>

提前致谢!

Answer 1

你必须做这样的事情

<?php

    if(!empty($errors))
    {
        ?>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <?php echo "<div class=\"errors\">" . implode("<br>", $errors) . "</div>"; ?>
            </div>
        </div>
    <?php
    }
    else
    {

    }

    if(!empty($success))
    {
        ?>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <?php echo "<div class=\"success\">" . $success . "</div>"; ?>
            </div>
        </div>
    <?php
    }
    else
    {

    }

?>