Convalida client MVC ASP.NET con jQuery utilizzando Html.ValidationMessage?

Question

Sto cercando di attingere all'elemento HTML.ValidationMessage() per scrivere validazione lato client davvero personalizzata con jQuery. È possibile? La mia convalida lato server viene visualizzata utilizzando HTML.ValidationMessage() e mi chiedo come accedere a quell'elemento per visualizzare un messaggio personalizzato utilizzando jQuery prima dell'invio di un modulo.

So che ci sono alcuni plugin là fuori per fare alcune di queste cose, ma mi piacerebbe davvero un controllo completo con la mia validazione.

Ecco un po 'del codice Javascript che ho attualmente. Fondamentalmente aggiunge la validazione "class" all'elemento input su submit, tuttavia non è sicuro come accedere a Html.ValidationMessage per produrre qualcosa come "Email required".

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

e il codice dalla Vista:

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

Answer 1

si potrebbe scrivere un sacco di codice per fare questo. O potresti semplicemente usare xVal, che è gratuito e fa esattamente questo, e molto altro ancora. Inserisci annotazioni sui tuoi tipi .NET, aggiungi un paio di cose semplici al tuo aspx e ottieni la convalida di jQuery gratuitamente. Inoltre, viene fornito con i provider di framework popolari ed è molto personalizzabile nel caso in cui sia necessaria una convalida più complessa.

Non vedo la necessità di reinventare la ruota qui.

Answer 2

Se si mette il messaggio in modo statico nella pagina e impostare è display su "none", è in grado di dimostrare che un messaggio allo stesso tempo, si modifica il classe per il campo di input.

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

Poi, nel tuo JS aggiungere questa riga sotto il cambiamento parte questo:

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

a questo:

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

Potrebbe essere necessario un po 'di CSS per posizionare quella roba di conseguenza, ma funzionalmente dovrebbe fare quello che vuoi.

EDIT:

Per evitare markup più sostituire:

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

con:

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

Answer 3

Creare un HtmlHelper che è un ValidatedTextBox. L'ho fatto usando il reflection sui miei modelli, creando un'integrazione jQuery completamente dinamica con la validazione, ma una versione più semplice avrebbe funzionato in questo modo (probabilmente funzionerà, ma non è testata così com'è). Un buon punto di partenza:

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

e il corrispondente "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

Sarebbe un'idea utilizzare solo il modulo jquery validation plugin per il lato client? È facile da implementare nel codice di visualizzazione. Aggiungete alcuni tag alle caselle di input e aggiungete alcune righe di javascript nell'intestazione e il gioco è fatto. Ovviamente dovresti ancora codificare tutto ciò che è "molto personalizzato" per così dire.