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

时间:2015-09-16 10:37:55

标签: php html css forms validation

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

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

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

提前致谢!!

3 个答案:

答案 0 :(得分: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
    {

    }

?>

答案 1 :(得分:0)

如果您可以共享您的PHP代码会很有帮助,但如果不这样做,我会猜测您正在执行以下操作:

<div class="errors">
    <?php 
    foreach ($errors as $error) {
        echo $error . '<br>';
    }
    ?>
</div>

查看您网站的HTML时,<div class="errors"></div> HTML已经存在。

您应该使用<div>语句包装isset(),因此仅在有要显示的内容时输出HTML。

例如:

<?php if (isset($errors) && !empty($errors)): ?>
    <div class="errors">
        <?php 
        foreach ($errors as $error) {
            echo $error . '<br>';
        }
        ?>
    </div>
<?php endif; ?>

答案 2 :(得分:0)

最简单的方法:

// your php code goes here
<?php

    $http_post = ('POST' == $_SERVER['REQUEST_METHOD']);
    if($http_post)
    {
        if(empty($error))
          $class = 'error';
        else
          $class = 'success';
    }

?>

  // your html code 


<div class="<?php echo $class?>"></div>