javascript - 进行 ajax 调用时如何尊重客户端验证

Question

我想进行一个ajax调用，然后等待ajax调用的响应(在此之前停止表单提交)，然后根据我得到的ajax响应发布表单。这个问题是基于Make ajax call and then submit form 。因此，在放置以下脚本后，一切正常，但我失去了客户端验证。我可以进行 ajax 调用并仍然遵守客户端验证吗？

@section scripts {
    <script>
        var canSubmit = false;
        $('form').submit(function (e) {
            if (!canSubmit) {
                e.preventDefault();
                var data = $('form').serialize();
                var url = $(this).data('url');
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data,
                    success: function (response) {
                        if (response.hasPreviousRequest) {
                            if (confirm("You've already applied for this job. Apply again?")) {
                                canSubmit = true;
                                $('form').submit();
                            }
                        }
                        else {
                            canSubmit = true;
                            $('form').submit();
                        }
                    },
                    error: function () {
                        alert("error");
                    }
                });
            }
        });
    </script>
}

P.S:请注意，一旦我删除ajax调用，客户端验证就会开始正常工作。有人可以向我解释一下这种行为吗？

Answer 1

您需要在表单元素上调用.valid()方法(如果没有，则取消ajax调用)

$('form').submit(function (e) {
    if (!$(this).valid()) {
        return // exit
    }
    if (!canSubmit) {
        ....