使用 javascript 向现有表单添加验证错误？

Question

我有一个 ASP.NET MVC 4，我在其中使用带有验证属性的客户端和服务器端验证。

在使用 ajax 发送表单之前，将正确验证表单，如下所示：

function ValidateFormAndAjaxSubmit(formId, callingElement) {

    if (IsNotDblClick(callingElement.id)) {
        var _form = $("#" + formId);

        var validator = _form.validate();
        var anyError = false;

        _form.find("input").each(function () {
            if (!validator.element(this)) { // validate every input element inside this step
                anyError = true;
            }
        });

        if (anyError) {
            window.latestClick = '';
            return false; // exit if any error found    
        }

        $.post(_form.attr("action"), _form.serialize(), function (data) {

            if (data.Success) {

            }
            else {

            }

            alert("Win");
            window.latestClick = '';
            //check the result and do whatever you want
        })
    }
}

表格如下所示：

@using (Html.BeginForm("JEdit", "Post", FormMethod.Post, new { id = "frmEditPost" }))
{
    @Html.ValidationSummary(true)
    ...
}

将在服务器端进行额外的验证，并将其存储在这样的返回类中：

public class JEditResult
    {
        public Boolean Success = false;
        public string TitleErrMessage;
        public string TextErrMessage;
        public string LinkErrMessage;
        public string TagErrMessage;
        public string OtherErrMessage;
    }

现在我需要将这些验证放入表单中，就好像它们已在客户端上进行了验证一样。我该怎么做？

Answer 1

我使用以下扩展方法：

public static JsonResult JsonValidation(this ModelStateDictionary state, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet) {
    var result = new JsonResult {
        Data = new {
            success = false,
            Tag = "ValidationError",
            State = from e in state
                    where e.Value.Errors.Count > 0
                    select new {
                        Name = e.Key,
                        Errors = (e.Value.Errors.Select(x => x.ErrorMessage)
                            .Concat(e.Value.Errors.Where(x => x.Exception != null).Select(x => x.Exception.Message)))
                            .Where(x => !String.IsNullOrEmpty(x)).Select(x => x)
                    }
        }
    };
    result.JsonRequestBehavior = behavior;
    return result;
}

然后像这样在我的代码中使用它：

if (ModelState.IsValid == false) {
    Response.StatusCode = 400;
    return ModelState.JsonValidation();
}

我也有一些我使用的标准 js 代码：

// JSON validation
function validateResponse(form, response) {
    var data = getResponseValidationObject(response);
    if (!data) return true;

    var validator = form.validate();
    var container = form.find("[data-valmsg-summary=true]");
    var list = container.find("ul");
    if (!list) return;

    container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
    list.empty().show();
    $.each(data.State, function (i, item) {
        list.append("<li>" + item.Errors.join("</li><li>") + "</li>");
    });
    return false;
}

// JSON validation
function getResponseValidationObject(response) {
    if (response && response.Tag && response.Tag == "ValidationError")
        return response;
    return null;
}

然后在我的 ajax 帖子中检查返回响应的有效性：

var json = $.parseJSON(response.responseText);
var isValid = validateResponse($("#form"), json);
// Do something here...

validateResponse 函数会自动将错误添加到表单验证摘要（假设有一个）。