ASP.NET MVC İstemci Doğrulama?

Question

jQuery ile çok özel istemci tarafı doğrulaması yazmak için HTML.ValidationMessage() öğesine girmeye çalışıyorum. Bu mümkün mü? Sunucu tarafı doğrulama, HTML.ValidationMessage() kullanılarak görüntülenir ve bir form göndermeden önce jQuery kullanarak özel bir ileti görüntülemek için bu öğeye nasıl erişebileceğimi merak ediyorum.

Bazı şeyleri yapmak için dışarıda birkaç eklenti olduğunu biliyorum, ancak doğrulama işlemini tamamıyla kontrol etmeyi gerçekten çok isterim.

Şu anda sahip olduğum Javascript kodunun bir kısmı. Temel olarak, "sınıfı" onaylamadaki giriş öğesine ekler, ancak Html.ValidationMessage öğesine "E-posta gerekli" gibi bir şey çıktığında nasıl erişileceğinden emin olmaz. Eğer sayfasında statik mesajı koyup ayarlarsanız

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

Answer 1

Bunu yapmak için kod bir ton yazabilirsiniz. Ya da sadece xVal'u kullanabilirsiniz, bu ücretsiz ve tam olarak bunu yapar, artı çok daha fazlası. .NET türlerinize değer ek açıklamaları koyun, aspx'inize birkaç basit şey ekleyin ve jQuery doğrulamasını ücretsiz olarak edinin. Ayrıca, popüler çerçeveler için sağlayıcılarla birlikte gelir ve daha karmaşık bir doğrulamaya gereksiniminiz olması durumunda çok özelleştirilebilir.

Buradaki tekerleği yeniden icat etmeye gerek yok.

Answer 2

o "yok", değiştirmek, aynı zamanda bu mesajı gösterebilirim Ekran var: adlı

<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> 

Ve Kod giriş alanı için sınıf. Buna

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

: sizin JS Sonra

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

bölüm değişikliği bu altında bu satırı ekleyin buna göre bu maddeleri konumlandırmak için biraz CSS gerekebilir

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

ama işlevsel olarak istediğini yapmalı.

DÜZENLEME:

ekstra biçimlendirme değiştirmek önlemek için: ile

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

:

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

Answer 3

bir ValidatedTextBox bir HtmlHelper oluşturun. Bunu modellerimdeki yansımayı kullanarak yaptım, doğrulama ile tamamen dinamik bir jQuery entegrasyonu yarattım, ancak daha basit bir versiyon böyle çalışacaktı (bu muhtemelen işe yarayacak, ancak durduğu gibi test edilmeyecek).

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); 
} 

Ve buna karşılık gelen "GetFormValidationScript": iyi bir yer başlatmak için

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

İstemci tarafı için jquery formunu validation plugin kullanmak bir fikir olabilir miydi? Görüntüleme kodunda uygulanması kolaydır. Giriş kutularına birkaç etiket eklersiniz ve üstbilgide birkaç satır javascript eklersiniz ve işiniz biter. Tabii ki konuşmak için 'çok özel' olan herhangi bir şeyi kodlamak zorunda kalacaksınız.