如何验证联系表单必填字段并相应地显示错误消息

时间:2014-01-29 05:39:19

标签: php html forms validation

我是PHP的新手。我尝试使用HTML和PHP创建联系表单。提交时,此联系表格将向接收方发送邮件 以下是HTML中联系表单代码的代码:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>

            <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> 
            <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
            <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
            <link rel="stylesheet" type="text/css" href="css/coder.css"/>
            <style  type="text/css">
    .bg-color{
    background-color:#F9F1E4;
    border-radius:5px;
    margin:5px;
    }
    .row_color{
    border:2px solid #A40F17;
    margin:0px;
    }
    .footer_class{
    background-color:#A40F17;
    height:40px;
    }
    .font_color{
    color:#fff;
    margin-top:5px;
    }
    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
        background-color: #A40F17;
        color: #FFFFFF;
    }
    .h_color{
    background-color:#FFFFFF;
    }
    .danger{
    color:#A40F17;
    }
    .h_top{
    margin-top:30px;
    }
    .h_height{

    height:173px;
    }
    </style>
        </head>
        <body>
            <header>
        <div class="row h_color h_height">
        <div class="container">
            <div class="col-lg-12">
            <div class="col-lg-6">
            <a href="" class="navbar-brand"><img class="image-responsive" src="images/logo_rugs.jpg"/></a>
                </div>

            </div>
        </div>
        <nav class="navbar navbar-inverse">
                <div class="container">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeader">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="collapse navbar-collapse navHeader">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="aboutus.html">About Us</a></li>
                            <li><a href="products.html">Products</a></li>
                            <li><a href="gallery.html">Gallery</a></li>
                            <li class="active"><a href="contactus.html">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container" style="background-color:#fff;">
            <div class="row">
                <div class="col-lg-12">
                        <h3>Contact Us</h3>
                        <div class="col-lg-7 well">
  <form enctype="multipart/form-data" method="post" name="contactform" id="former" action="contact.php">

                            <h4 style="padding-top:8px;">Your email address will not be published. Required fields are marked *</h4>
                                <label>Name*</label><br>
                                <input class="form-control" style="height:35px;width:230px;border-radius:4px;"type="text" name="text"/><br>
                                <label>Phone*</label><br>


            <span>

                <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value="" type="text"> -

            </span>
            <span>
                <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -

            </span>
            <span>
                <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value="" type="text">

            </span>

    <br><br>
                                <label>Email*</label><br>
                                <input class="form-control" style="height:35px;width:230px;border-radius:4px;"type="email" name="text"/><br>
                                <label for="input4">Message</label>
                                <textarea name="contact_message" class="form-control" rows="4" id="input4"></textarea>
                                <p>&nbsp;</p>
                                <button type="submit" style="margin-left:65px;"class="btn btn-large btn-info">Submit</button>
</form>

                        </div>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>    

以下是在提交联系人表单时调用的contact.php的代码。

<?php

extract($_POST, EXTR_OVERWRITE);
$name=chop($name);
$phone=chop($element_4_1);
$phone.=chop($element_4_2);
$phone.=chop($element_4_3);
$email=chop($text);
$message1=chop($contact_message);

if ($name && $phone && $email) { 

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: auto-reply\n";
$recipient= "test@gmail.com";



$subject="Online Enquiry";


$message.="\nName                   : $name\n";

 $message.="\nPhone                  : $phone\n";

 $message.="\nEmail ID               : $email\n";

 $message.="\nMessage                : $message1\n";

 //send auto-reply
$subject_reply="Thank you";
$message_reply="Thank you for contacting us.";
mail($email, $subject_reply, $message_reply, $headers);

 //Send Mail
//===========
if(mail($recipient, $subject, $message, $headers)) {

echo "<meta http-equiv='REFRESH' content='0;url=contactus.html'>";
}
}
else { 
exit("You have not filled out all the required fields. Please hit your back button and fill out all the required fields.");
}

?>

上面的代码工作正常。现在,当我提交表单而不填写必填字段时,我在另一页面提交表单后收到错误 我想以这样的方式验证必填字段,如果它们未填充,则必须在必需的文本字段下方显示错误。假设名称未填充,则应在文本字段后显示错误名称为manadatory。我怎么能这样做。

3 个答案:

答案 0 :(得分:1)

您可以为所有字段添加if条件,只有在验证失败时才从那里返回。

你可以试试这个,

if($name == '') {
    $msg = 'Name is manadatory';
    //create and append div
    return false;
}

在if中动态创建一个div,给它$ msg变量的值,然后在你的字段后追加该div。

答案 1 :(得分:0)

我觉得很难看到你的完整代码..因为你已经添加了css所有内容..请按照以下网址创建一个带验证的表单

http://www.freecontactform.com/email_form.php

请按照步骤操作并改进您的代码。

答案 2 :(得分:-1)

您可以参考AJAX,AJAX是服务器端脚本,在Ajax中创建函数并将其重定向到您的PHP文件。