Xác thực ứng dụng ASP.NET MVC với jQuery bằng cách sử dụng Html.ValidationMessage?

Question

Tôi đang cố gắng nhấn vào phần tử HTML.ValidationMessage() để viết để xác thực phía khách hàng thực sự tùy chỉnh với jQuery. Điều này thậm chí có thể? Xác thực phía máy chủ của tôi được hiển thị bằng cách sử dụng HTML.ValidationMessage() và tôi tự hỏi làm cách nào tôi có thể truy cập phần tử đó để hiển thị thông báo tùy chỉnh bằng cách sử dụng jQuery trước khi gửi biểu mẫu.

Tôi biết có một vài plugin ngoài đó để thực hiện một số công cụ này, nhưng tôi thực sự muốn kiểm soát hoàn toàn bằng xác thực của mình.

Dưới đây là một chút mã Javascript tôi hiện có. Về cơ bản nó cho biết thêm các xác nhận "lớp" để các yếu tố đầu vào trên trình, tuy nhiên không chắc chắn làm thế nào để truy cập vào Html.ValidationMessage để sản xuất một cái gì đó như "Email yêu cầu."

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input[type=submit]").click(function() { 

      var valid = true; 

      // email blank 
      if ($("input[name='email']").val().length < 1) { 
       $("input[name='email']").addClass("input-validation-error"); 
       valid = false; 
      } 

      return valid; 
     }) 
    }); 

</script> 

Và Mã từ Xem:

 <p> 
      <label for="email"> 
       Email:</label> 
      <%= Html.TextBox("email") %> 
      <%= Html.ValidationMessage("email") %> 
     </p> 

Answer 1

Bạn có thể viết một tấn mã để làm điều này. Hoặc bạn chỉ có thể sử dụng xVal, miễn phí và thực hiện chính xác điều này, cộng thêm nhiều hơn thế nữa. Đặt chú thích giá trị trên các loại .NET của bạn, thêm một vài điều đơn giản vào aspx của bạn và bạn nhận được xác nhận jQuery miễn phí. Cộng với nó đi kèm với các nhà cung cấp cho các khuôn khổ phổ biến, và nó rất tùy biến trong trường hợp bạn cần xác nhận phức tạp hơn.

Tôi thấy không cần phải phát minh lại bánh xe ở đây.

Answer 2

Nếu bạn đặt thông điệp tĩnh trong trang và thiết lập nó hiển thị để "none", bạn có thể hiển thị thông báo rằng cùng lúc bạn thay đổi lớp cho trường nhập.

<p> 
     <label for="email"> 
      Email:</label> 
     <%= Html.TextBox("email") %><span style="display:none" class="email-error">Email required</span> 
     <%= Html.ValidationMessage("email") %> 
    </p> 

Sau đó, trong JS của bạn thêm dòng này dưới sự thay đổi phần này:

 if ($("input[name='email']").val().length < 1) { 
      $("input[name='email']").addClass("input-validation-error"); 
      valid = false; 
     } 

này:

 if ($("input[name='email']").val().length < 1) { 
      $("input[name='email']").addClass("input-validation-error"); 
      $("span.email-error").show(); 
      valid = false; 
     } 

Bạn có thể cần một số CSS để vị trí thứ mà cho phù hợp, nhưng về mặt chức năng nó nên làm những gì bạn muốn.

EDIT:

Để tránh thêm đánh dấu thay thế:

$("span.email-error").show(); 

với:

$("input[name='email']").after('<span style="display:none" class="email-error">Email required</span>'); 

Answer 3

Tạo một HtmlHelper đó là một ValidatedTextBox. Tôi đã thực hiện điều này bằng cách sử dụng sự phản chiếu trên các mô hình của mình, tạo ra một tích hợp jQuery đầy đủ năng động với xác thực, nhưng một phiên bản đơn giản hơn sẽ hoạt động như thế này (điều này có thể hoạt động nhưng chưa được kiểm tra khi nó đứng). Một nơi tốt để bắt đầu:

public static MvcForm BeginClientValidatedForm(this HtmlHelper helper, string formId) 
{ 
    HttpResponseBase response = helper.ViewContext.HttpContext.Response; 
    if (helper.ViewData.ModelState.IsValid) 
    { 
     response.Write("<ul class=\"validation-summary-errors\"></ul>\n\n"); 
    } 

    response.Write(ClientValidationHelper.GetFormValidationScript(formId)); 
    response.Write("\n"); 

    // Inject the standard form into the httpResponse. 
    var builder = new TagBuilder("form"); 
    builder.Attributes["id"] = formId; 
    builder.Attributes["name"] = formId; 
    builder.Attributes["action"] = helper.ViewContext.HttpContext.Request.Url.ToString(); 
    builder.Attributes["method"] = HtmlHelper.GetFormMethodString(FormMethod.Post); 
    response.Write(builder.ToString(TagRenderMode.StartTag)); 

    return new MvcForm(response); 
} 

Và "GetFormValidationScript" tương ứng:

public static string GetFormValidationScript(string formId) 
    { 
    string scriptBlock = 
    @"<script type=""text/javascript""> 
    $(document).ready(function() {{ 
     $(""#{0}"").validate({{ 
     meta:""rules"", 
     onkeyup:false, 
     onfocusout:false, 
     onclick:false, 
     errorClass:""input-validation-error"", 
     errorElement:""li"", 
     errorLabelContainer:""ul.validation-summary-errors"", 
     showErrors: function(errorMap, errorList) {{ 
      $(""ul.validation-summary-errors"").html(""""); 
      this.defaultShowErrors(); 
     }}"; 

     // etc...this is the standard jQuery.validate code. 

     return string.Format(scriptBlock, formId); 


    } 

public static string ClientValidatedTextbox(this HtmlHelper htmlHelper, string propertyName, IDictionary<string, object> htmlAttributes, string validationType) 
{ 
    var cssClassBuilder = new StringBuilder(); 
    cssClassBuilder.Append("text "); 
    if (htmlAttributes == null) 
    { 
     htmlAttributes = new Dictionary<string, object>(); 
    } 
    else if(htmlAttributes.ContainsKey("class")) 
    { 
     cssClassBuilder.Append(htmlAttributes["class"]); 
    } 

    switch validationType 
    { 
     case "email": 
     cssClassBuilder.Append(" {rules: {email: true, messages: {email: 'A valid email is required.'}} } "); 
     break; 
    } 

    htmlAttributes["class"] = cssClassBuilder.ToString(); 

    return htmlHelper.TextBox(propertyName, htmlAttributes); 
} 

Answer 4

Bạn có nên sử dụng hình thức jquery validation plugin cho phía máy khách không? Thật dễ dàng để triển khai trong mã xem. Bạn thêm một vài thẻ vào hộp nhập liệu và thêm một vài dòng javascript vào tiêu đề và bạn đã hoàn tất. Ofcourse bạn vẫn sẽ phải mã bất cứ điều gì đó là 'rất tùy chỉnh' để nói chuyện.