Question

我正在使用jQuery Validate插件验证表单，但每次提交表单时，页面都会重定向到操作页面。我知道表单没有错误，我不仅要验证表单，还要尝试使用ajax提交表单。我也使用bootbox alert来显示警报中的错误。

以下是我包含的JavaScript文件

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootbox.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

这是我用于自定义JS编码的custom.js文件

    $(document).ready(function() {
$(document).ajaxStart(function() {
        $(".loadr").show();
        $(".send-btn").attr("disabled", "disabled");
        $(".send-btn").css("opacity", "0.5");
    });
    $(document).ajaxComplete(function() {
        $(".loadr").hide();
        $(".send-btn").removeAttr("disabled", "disabled");
        $(".send-btn").css("opacity", "1")
    });
contactus();
});
function contactus()
{
    var action = $("#CommentForm").attr("action");
    $("#CommentForm").validate({
        errorElement: "div",
        errorClass: "error_message",
        rules: {
            ContactName: "required",
            ContactPhone: "required",
            ContactComment: "required",
            ContactEmail: {
                email: true
            }
        },
        messages: {
            ContactName: {
                required: "Please enter your Name."
            },
            ContactPhone: {
                required: "Please enter your Phone.",
            },
            ContactComment: {
                required: "Please enter your Message.",
            },
        },
        errorPlacement: function(error, element) {
            //error.hide().insertBefore(element.prev()).show("slide", '', 'fast');
        },
        invalidHandler: function(event, validator) {
            var summary = "";
            console.log(validator.errorList);
            jQuery.each(validator.errorList, function() {
                summary += this.message + '<br />' + "\n";
            });
            alert(summary);
        },
        onfocusout: function(element) {
            $("div.error_message").hide();
        },
        submitHandler: function(form) {
            $('.loadr').show();
            $.ajax({
                type: "POST",
                url: "http://www.mysite.ae/contact.php",
                data: $(form).serialize(),
                success: function(data) {
                    $("#CommentForm")[0].reset();
                    $("#Contactmsgdiv").empty().html('<br /><div class="alert alert-success" style="border: 1px solid;"><strong> Thank you! </strong>  We have received your request and will respond shortly!.</div>');
                    $('.loadr').hide();
                }
            });
            return false;
        }
    });
}

这里是html表单代码

<form class="progression-contact wpcf7" id="CommentForm" method="post" action="contact.php" novalidate="novalidate">
                            <fieldset>
                                <div>
                                    <p><input id="ContactName" name="ContactName" class="textInput" placeholder="Name" /></p>
                                </div>
                                <div>
                                    <p><input id="ContactEmail" name="ContactEmail" class="textInput email" placeholder="E-mail" /></p>
                                </div>
                                <div>
                                    <p><input id="ContactPhone" name="ContactPhone" class="textInput digits" value="" placeholder="Phone" /></p>
                                </div>
                                <div>
                                    <p><textarea id="ContactComment" name="ContactComment" class="textInput" rows="10" cols="4" placeholder="Your Message"></textarea></p>
                                </div>
                                <div>
                                    <p><button type="submit" class="progression-contact-submit wpcf7-submit"><span>Send Us Your Message</span></button><img src="http://www.mysite.ae/images/bx_loader.gif" style="margin-left:15px;display:none; " class="loadr"></p>
                                </div>
                            </fieldset>
                    </form>

Answer 1

我最终解决了这个问题:)我实际上是在使用bootbox而忘记了bootstrap的css和js文件也是使用bootbox所必需的，还有另一个JS文件正在创建问题，我在上面包含它提到JS，它就像一个魅力

Answer 2

如果您不想使用操作提交表单，只需将提交按钮更改为常规按钮即可。这将触发ajax事件而不提交表单。见下文。

<form class="progression-contact wpcf7" id="CommentForm" method="post" action="contact.php" novalidate="novalidate">
                        <fieldset>
                            <div>
                                <p><input id="ContactName" name="ContactName" class="textInput" placeholder="Name" /></p>
                            </div>
                            <div>
                                <p><input id="ContactEmail" name="ContactEmail" class="textInput email" placeholder="E-mail" /></p>
                            </div>
                            <div>
                                <p><input id="ContactPhone" name="ContactPhone" class="textInput digits" value="" placeholder="Phone" /></p>
                            </div>
                            <div>
                                <p><textarea id="ContactComment" name="ContactComment" class="textInput" rows="10" cols="4" placeholder="Your Message"></textarea></p>
                            </div>
                            <div>
                                <p><button type="button" class="progression-contact-submit wpcf7-submit"><span>Send Us Your Message</span></button><img src="http://www.mysite.ae/images/bx_loader.gif" style="margin-left:15px;display:none; " class="loadr"></p>
                            </div>
                        </fieldset>
                </form>

jQuery验证效果不佳

2 个答案: