Question

所以我使用https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form中的示例创建了一个联系表单，当放在页面上时它可以正常工作，但是当我将它放在bootstrap弹出模式中时，验证器不起作用。如果所有字段都为空并提交按钮，即使它没有发送，也会显示“已发送消息”，如果您填写字段，它仍会发送并给出成功消息。

另外，如果我在页面加载时点击按钮打开模态，但在加载脚本之前，它会起作用，所以很明显因为当验证器脚本加载时模态不可见，所以它错过了它。 / p>

如果有人有一些答案，那将是非常有用的，因为我对PHP和JS很新！

这是我的模态HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><button aria-label="Close" class="close"
data-dismiss="modal" type="button"><span aria-hidden=
"true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form action="../contact.php" id="contact-form" method="post" name=
"contact-form">
<div class="messages"></div>
<div class="row">
<div class="col-md-12">
<div class="form-group"><label for="form_name">Firstname *</label>
<input class="form-control" data-error="Firstname is required." id="form_name"
name="name" placeholder="Please enter your first name" required="required"
type="text">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group"><label for="form_email">Email *</label> <input class=
"form-control" data-error="Valid email is required." id="form_email" name=
"vemail" placeholder="Please enter your email" required="required" type=
"email">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group"><label for="form_message">Message *</label> 
<textarea class="form-control" data-error="Please,leave us a message." id=
"form_message" name="message" placeholder="Please enter your message" required=
"required" rows="4"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12"><input class="btn btn-success btn-send" type="submit"
value="Send message"></div>
</div>
</form>
</div>
</div>
<!-- /.modal-content --></div>
<!-- /.modal-dialog --></div>
<!-- /.modal -->
</body>
</html>

这是我的PHP文件

<?php

// configure

$from = '<mail@myemail.net>'; 
$sendTo = 'Demo contact form <mail@myemail.net>';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'vemail' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in email
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please try again later';    

$email = ($_POST["vemail"]);
$subject2 = 'Thank you for contacting support.';
$msg = "Thank you for contacting Support. We have received your contact form and will be in contact as soon as possible";
$headers = 'Reply-To: mail@myemail.net' . "\r\n" ;    

// let's do the sending

try
{
    $emailText = "You have new message from contact form\n=============================\n";
       foreach ($_POST as $key => $value) {

        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    }

   mail($email, $subject2, $msg, $headers) && mail($sendTo, $subject, $emailText, "From: " . $from);

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');        
    echo $encoded;
}
else {
    echo $responseArray['message'];
}
 ?>

和JS

$(function () {

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "../contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                    }
                }
            });
            return false;
        }
    })
});

Answer 1

将您的ajax调用放入验证过程并使用 submitHandler 。

@Sparky的回答可能会保存您的一天https://stackoverflow.com/a/15625824/6952155

请参阅此处并编辑以适合您的代码。

$(document).ready(function () {

 $("#contactform").validate({
     ignore: ":hidden",
     rules: {
         name: {
             required: true,
             minlength: 3
         },
         cognome: {
             required: true,
             minlength: 3
         },
         subject: {
             required: true
         },
         message: {
             required: true,
             minlength: 10
         }
     },
     submitHandler: function (form) {
         alert('valid form submission'); // for demo
         $.ajax({
             type: "POST",
             url: "formfiles/submit.php",
             data: $(form).serialize(),
             success: function () {
                 $(form).html("<div id='message'></div>");
                 $('#message').html("<h2>Your request is on the way!</h2>")
                     .append("<p>someone</p>")
                     .hide()
                     .fadeIn(1500, function () {
                     $('#message').append("<img id='checkmark' src='images/ok.png' />");
                 });
             }
         });
         return false; // required to block normal submit since you used ajax
     }

 });

 });

Answer 2

Ondrej，Bootstrapious教程的作者。

我刚刚发现Bootstrap验证器出错，但与Bootstrap模式组合使用时无法正常工作。

解决方案是从https://github.com/1000hz/bootstrap-validator下载最新版本，目前为0.11.5。

最佳，

的Ondrej

联系表单不会验证内部引导模式

2 个答案: