Question

当我第一次提交表单时，客户端验证工作正常，但是当我成功提交后再次提交表单时，它不会进行客户端验证。我无法弄清楚问题是什么。这是我的代码的一部分：

 function SubmitProjectDetails(e) {
        var detailsForm = $('#project-details-form');
        if (!detailsForm.valid() || !$("#project-details-form select.chosen-select").valid()) {  //Need to check the selects that are hidden by the chosen framework specially or they will be ignored
            e.preventDefault();
            $("#project-details-form select.chosen-select").each(function (){
                if (! $(this).valid()) {
                    $("#" + $(this).prop("id") + "_chosen a").addClass("input-validation-error");
                }
            });
            var v = detailsForm.validate();
            $("#project-details-form select.chosen-select").on("change blur",
                function() {
                    var element = $("#" + $(this).prop("id"));
                    $("#" + $(this).prop("id") + "_chosen a").removeClass("input-validation-error");
                   v.element(element);
                 });
            return;
        }
        $("#project-details-return-message").html("");
        var id = @Html.Raw(Json.Encode(Model.ProjectDetailsViewModel?.Project?.Id));
        if (id != null) {
            e.preventDefault();
            $("#project-details-container").html("<h1 style='color:grey'>Loading...</h1>");
            $.ajax({
                type: detailsForm.attr('method'),
                url: detailsForm.attr('action'),
                data: detailsForm.serialize(),
                success: function(data) {
                    $("#project-details-container").html(data);
                    putAsterisksOnRequiredFields();
                },
                error: function(data) {
                    $("#project-details-container").html("<h1 style='color:red'>Ajax Error!</h1>");
                    console.log('An ajax error occurred.');
                    console.log(data);
                }
            });
        }
    }

Answer 1

第二种表单验证不正确。 this引用带有chosen-select类的选择（因为这是您使用之前的jQuery选择器$("#project-details-form select.chosen-select")选择的内容）。

你可以做的是创建一个包含表单有效状态的布尔变量，然后在你的条件中使用它。

以下是一个例子：

var detailsFormValid = detailsForm.valid();
if (!detailsFormValid  || !$("#project-details-form select.chosen-select").valid()) {
     e.preventDefault();
        $("#project-details-form select.chosen-select").each(function (){
            if (!detailsFormValid) {
                $("#" + $(this).prop("id") + "_chosen a").addClass("input-validation-error");
            }
        });
        var v = detailsForm.validate();
        $("#project-details-form select.chosen-select").on("change blur",
            function() {
                var element = $("#" + $(this).prop("id"));
                $("#" + $(this).prop("id") + "_chosen a").removeClass("input-validation-error");
               v.element(element);
             });
        return;
    }

使用AJAX第二次提交表单时，.valid（）不起作用

1 个答案: