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

Not focused inputs after click submit button in jQuery validation

本文关键字：集中 输入 按钮 提交 jQuery 验证 单击      更新时间：2023-09-26

我有一个表单(通过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 post.

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

手动设置焦点。

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

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