Question

我使用jquery验证插件以bootstrap模式形式进行验证，当我发送表单时，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

Answer 1

您可能需要删除此位：

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

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

Answer 2

使用.valid()方法：

描述：检查所选表格是否有效或所有选定元素是否有效。

Updated Fiddle

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

Doc：http://jqueryvalidation.org/valid/

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

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

2 个答案: