javascript - jquery 验证插件 ajax 提交不工作

Question

我使用 jquery 验证插件在 Bootstrap 模式表单中进行验证，当我发送表单时，jquery 验证插件不工作，表单也无法发送。

Bootstrap 模态形式

 <div class="modal fade" id="form-content" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h3>send message</h3>
                    </div>
                    <div class="modal-body">
                        <form class="contact">
                            <fieldset>
                                <div class="modal-body">
                                    <ul class="nav nav-list">
                                        <div class="form-group">
                                            <label for="topic" class="control-label ">topic:</label>
                                            <input class="form-control"  type="text" name="topic">
                                            <span class="help-block"></span>
                                        </div>
                                        <div class="form-group">
                                            <label for="ruser" class="control-label ">ruser: </label>
                                            <input class="form-control"  type="text" name="ruser">
                                            <span class="help-block"></span>
                                        </div>
                                        <div class="form-group">
                                            <label for="content" class="control-label ">content:</label>
                                            <textarea class="form-control" name="content" rows="3"></textarea>
                                            <span class="help-block"></span>
                                        </div>
                                    </ul>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" type="submit">send</button>
                        <a href="#" class="btn" data-dismiss="modal">close</a>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>


                 <button class="btn btn-success btn-lg" data-toggle="modal"
                                    data-target="#form-content">
                                send message
                            </button>

JavaScript

$(document).ready(function(){
    $('form').validate({
        rules: {
            topic: {
                required: true
            },
            ruser: {
                required: true
            },
            content: {
                required: true
            }
        },

        messages : {
            topic: {
                required: 'enter topic'
            },
            ruser: {
               required: 'enter ruser'
            },
            content: {
                required: 'enter content'
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }

        submitHandler: function (form) {
            alert('valid form submission'); // for demo
            $.ajax({
                type: "POST",
                url: "process.php",
                data: $('form.contact').serialize(),
                success: function(msg){
                    if(msg=='no'){
                        alert(msg);
                    }
                    else if(msg=='ok!'){
                        alert(msg);
                        location.reload()
                    }
                },
                error: function(){
                    alert("failure");
                }
            });
            return false;
        }
    });
});

我该如何解决这个问题？

jsfiddle

Answer 1

问题是提交按钮不是您尝试提交的表单的后代。

一个可能的解决方案是为按钮编写一个点击处理程序，然后从那里调用表单提交

        <div class="modal-footer">
            <button class="btn btn-success" id="submitcontact">send</button>
            <a href="#" class="btn" data-dismiss="modal">close</a>
        </div>

然后

$('#submitcontact').click(function(){
    $('form.contact').submit();
})

演示:Fiddle