Question

我有一张表格（由ajax提交）

<form action="/Home/Contact" method="POST" id="form0" novalidate="novalidate">
                <div class="form-group">
                    <label class="control-label" for="FullName">name</label>
                    <div class="row margin-bottom-20px">
                        <div class="col-md-7 col-md-offset-0">
                            <input class="form-control" data-val="true" data-val-required="please enter name" id="FullName" name="FullName" placeholder="name" type="text" value="">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="From">email</label>
                    <div class="row margin-bottom-20px">
                        <div class="col-md-7 col-md-offset-0">
                            <input class="form-control" data-val="true" data-val-email="please enter valid email" data-val-required="please enter email" id="From" name="From" placeholder="email" type="text" value="">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="Message">message</label>
                    <div class="row margin-bottom-20px">
                        <div class="col-md-11 col-md-offset-0">
                            <textarea class="form-control resize-vertical" cols="4" data-val="true" data-val-required="please enter message" id="Message" name="Message" placeholder="message" rows="4"></textarea>
                        </div>
                    </div>
                </div>
                <p>
                    <button type="submit" data-rel="submit" class="btn btn-primary" data-loading-text="loading..." data-ajax-submit="">send</button>

                    <button type="reset" class="btn btn-default">reset</button>
                </p>
</form>

和javascript代码是：

    $("[data-ajax-submit]").on('click', function (event) {
        event.preventDefault();

        var $button = $(this);
        var $form = $button.closest('form');

        var val = $form.validate();
        val.form();
        val.valid();
    });

提交表单后，输入由jquery验证突出显示但输入not focused，为什么？

注意：

当我删除event.preventDefault()工作但是发送表单发送正常回发而不是ajax帖子。

Answer 1

也就是说，您阻止了默认行为，因此onfocus事件不会冒泡到文本框。您可以做的是删除preventDefault（）调用，并在点击处理程序的末尾通过调用focus()或return false;

手动设置焦点

Answer 2

您可以尝试在invalidHandler方法中使用validate：

$form.validate({
    onfocusout: false,
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {                    
            validator.errorList[0].element.focus();
        }
    } 
});

在jQuery验证中单击提交按钮后没有聚焦输入

2 个答案: