Validation de client ASP.NET MVC avec jQuery en utilisant Html.ValidationMessage?

Question

J'essaie de puiser dans l'élément HTML.ValidationMessage() pour écrire une validation vraiment personnalisée du côté client avec jQuery. Est-ce seulement possible? Ma validation côté serveur est affichée en utilisant HTML.ValidationMessage(), et je me demande comment j'accéderais à cet élément pour afficher un message personnalisé en utilisant jQuery avant un envoi de formulaire.

Je sais qu'il y a quelques plugins pour faire ce genre de choses, mais j'aimerais vraiment avoir un contrôle complet avec ma validation.

Voici un peu du code Javascript que j'ai actuellement. Fondamentalement, il ajoute la validation "class" à l'élément d'entrée sur submit, mais ne sait pas comment accéder au Html.ValidationMessage pour sortir quelque chose comme "Email requis".

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

et le code de la vue:

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

Answer 1

Vous pouvez écrire une tonne de code pour le faire. Ou vous pouvez simplement utiliser xVal, qui est gratuit et fait exactement cela, plus beaucoup plus. Mettez des annotations de valeur sur vos types .NET, ajoutez quelques éléments simples à votre aspx, et vous obtenez la validation de jQuery gratuitement. De plus, il est livré avec des fournisseurs pour les cadres populaires, et il est très personnalisable au cas où vous avez besoin d'une validation plus complexe.

Je ne vois pas la nécessité de réinventer la roue ici.

Answer 2

Si vous mettez le message statiquement dans la page et définissez son affichage à « aucun », vous pouvez afficher ce message en même temps que vous changez la classe pour le champ de saisie.

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

Ensuite, dans votre JS ajouter cette ligne sous le changement partiel ceci:

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

à ceci:

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

Vous devrez peut-être un peu de CSS pour positionner ce genre de choses en conséquence, mais fonctionnellement ça devrait faire ce que tu veux.

EDIT:

Pour éviter le balisage supplémentaire remplacer:

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

avec:

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

Answer 3

Créer un HtmlHelper qui est un ValidatedTextBox. Je l'ai fait en utilisant la réflexion sur mes modèles, en créant une intégration jQuery entièrement dynamique avec validation, mais une version plus simple fonctionnerait comme ceci (cela fonctionnera probablement mais elle n'est pas testée en l'état). Un bon endroit pour commencer:

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

Et le correspondant "GetFormValidationScript":

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

Serait-ce une idée d'utiliser simplement le formulaire jquery validation plugin pour le client? Il est facile à implémenter dans le code de vue. Vous ajoutez quelques balises aux champs de saisie et ajoutez quelques lignes de javascript dans l'en-tête et vous avez terminé. Bien sûr, vous devrez toujours coder tout ce qui est «très personnalisé» pour ainsi dire.