使用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函數會自動爲表單驗證摘要（假設有一個）添加錯誤。