Question

我已经使用Bootsrap和PHP验证创建了用于发送电子邮件的模式联系表单，我面临的技术问题是：

即使有错误，模态仍在提交。
提交时模态会自动关闭：我想保持模态有效，并显示错误或在模态内成功发送。

以其他方式：当我打开模式“联系表”时，填写它，不应该提交任何内容，如果没有错误，则应该保持显示状态：消息已成功发送..然后用户可以单击关闭按钮。

任何建议？

Index.php：

<div class="modal fade" id="modalContactForm" tabindex="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog text-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title w-100 font-weight-bold">Leave a Message Below & We Will Get Back To You Shortly</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" style="display: flex;justify-content: center;"> 
                    <?php include('contact-temp.php'); ?>   
            <form id="contact" action="<?= htmlspecialchars($_SERVER["PHP_SELF"]) ?>" method="post">
                    <div class="row">
                        <i class="fas fa-user big-icon"></i>
                        <fieldset>
                            <input type="text" name="name" value="<?= $name ?>" placeholder=" " tabindex="1" autofocus="autofocus">
                            <span class="inputup">Your Name:</span>
                        </fieldset>
                        </br><span class="error"><?= $name_error ?></span>
                    </div>

                    <div class="row">
                        <i class="fas fa-envelope big-icon">  </i>
                        <fieldset>
                            <input type="text" name="email" value="<?= $email ?>" placeholder=" " tabindex="2">
                            <span class="inputup">Your Email:</span>
                        </fieldset>
                        </br><span class="error"><?= $email_error ?></span>
                    </div>

                    <div class="row">
                        <i class="fas fa-phone big-icon"></i>
                        <fieldset>
                            <input type="text" name="phone" value="<?= $phone ?>" placeholder=" " tabindex="3">
                            <span class="inputup">Your Phone:</span>
                        </fieldset>
                        </br><span class="error"><?= $phone_error ?></span>
                    </div>

                    <div class="row align-top">
                        <i class="fas fa-pencil-alt big-icon align-top"></i>
                        <fieldset>
                            <textarea type="text" name="msg" placeholder=" " tabindex="4"><?= $msg ?></textarea>
                            <span class="inputup">Type Your Message Here:</span>
                        </fieldset>
                        </br><span class="success"><?= $success; ?></span>
                    </div>
<button type="submit" value="submit" id="contact-submit" tabindex="5" data-submit="...Sending">Submit<i class="fas fa-paper-plane"></i></button>



            </form>
        </div>

        <div class="modal-footer justify-content-center">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>              
        </div>
    </div>
</div>

Contact-form.php：

<?php

$name_error = $email_error = $phone_error = $msg_error = "";
$name = $email = $phone = $msg = $success = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {

if (empty($_POST["name"])) {
$name_error = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$name_error = "Only letters and white space allowed"; 
}}

if (empty($_POST["email"])) {
$email_error = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format"; 
}}

if (empty($_POST["phone"])) {
$phone_error = "Phone is required";
} else {
$phone = test_input($_POST["phone"]);
// check if e-mail address is well-formed
if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$phone)){
$phone_error = "Invalid phone number"; 
}}

if (empty($_POST["msg"])) {
$msg_error = "Message Can Not Be Empty";}  
else {
$msg = ($_POST["msg"]);
//$message = test_input($_POST["message"]);
//$message = "$message";
}}

//if all the errors are empty, only then send the message
if ($name_error == '' and $email_error == '' and $phone_error == '' and $msg_error == '')
{
$message_body = '';
unset($_POST['submit']);
foreach ($_POST as $key => $value) {
$message_body .= "$key: $value\n";

$to      = 'me@hotmail.com';
$subject = 'Email From Web!!';
if (mail($to, $subject, $message_body)){
$success = "Message sent, thank you for contacting us!";
//reset form values to empty strings
$name = $email = $phone = $message = $url = ''; }
}}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;}
?>

联系表单模式在提交和验证之前已关闭

0 个答案: