jquery验证插件ajax提交表单不起作用答案

【问题标题】：jquery validation plugin ajax submit a form not workingjquery验证插件ajax提交表单不起作用
【发布时间】：2015-10-10 21:37:25
【问题描述】：

我使用 jquery 验证插件在引导模式表单中进行验证，当我发送表单时，jquery 验证插件正在工作，但 ajax 代码将执行两次并且表单无法发送。

引导形式

<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" value="<?php echo $username; ?>" readonly/>
                    <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>
    <button class="btn btn-success" id="submitcontact">ok</button>
</form>

javascript

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

        messages: {
            topic: {
                required: 'enter topic'
            },
            ruser: {
                required: 'enter nuser'
            },
            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) {
            $.ajax({
                type: "POST",
                url: "process.php",
                data: $('form.contact').serialize(),
                success: function (msg) {
                    alert("ok!");
                    if (msg == 'ok') {
                        alert(msg);
                        location.reload()
                    }
                },
                error: function () {
                    alert("failure");
                }
            });
            return false;
        }
    });

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

我该如何解决这个问题？

jsfiddle

【问题讨论】：

如果有帮助，请您标记答案吗？

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

您可能需要删除此位：

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

请看示例： http://jsfiddle.net/8eoreedb/1/

【讨论】：

【解决方案2】：

使用.valid()方法：

说明：检查选中的表单是否有效，或者是否所有选中的元素都有效。

Updated Fiddle

$('#submitcontact').on('click', function() {
    if ($('form.contact').valid()) {
        // Form is valid
        $('form.contact').submit();
    }
});

文档：http://jqueryvalidation.org/valid/

演示：http://jsfiddle.net/8eoreedb/4/

【讨论】：