Validación de cliente MVC de ASP.NET con jQuery utilizando Html.ValidationMessage?

Question

Estoy tratando de aprovechar el elemento HTML.ValidationMessage() para escribir una validación del cliente tan personalizada con jQuery. ¿Esto es posible? Mi validación del lado del servidor se muestra usando HTML.ValidationMessage(), y me pregunto cómo accedería a ese elemento para mostrar un mensaje personalizado usando jQuery antes de enviar un formulario.

Sé que hay algunos complementos para hacer algunas de estas cosas, pero realmente me gustaría tener un control completo con mi validación.

Aquí hay un poco del código Javascript que tengo actualmente. Básicamente agrega la "clase" de validación al elemento de entrada en el envío, sin embargo, no está seguro de cómo acceder al Html.ValidationMessage para generar algo así como "Se requiere correo electrónico".

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

y el código de la Vista:

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

Answer 1

Se puede escribir un montón de código para hacer esto. O simplemente puede usar xVal, que es gratis y hace exactamente esto, y mucho más. Ponga anotaciones de valor en sus tipos de .NET, agregue un par de cosas simples a su aspx, y obtendrá la validación de jQuery de forma gratuita. Además, viene con proveedores de frameworks populares, y es muy personalizable en caso de que necesite una validación más compleja.

No veo la necesidad de reinventar la rueda aquí.

Answer 2

Si pones el mensaje de forma estática en la página y establece que es pantalla a "ninguno", que podría mostrar ese mensaje a la misma vez que cambie el clase para el campo de entrada.

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

Luego, en sus JS añadir esta línea en el marco del cambio de parte esto:

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

a esto:

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

Es posible que necesite un poco de CSS para posicionar esas cosas en consecuencia, pero funcionalmente debería hacer lo que quieras

EDIT:

Para evitar el marcado adicional reemplazar:

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

con:

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

Answer 3

Crear HtmlHelper que es un ValidatedTextBox. Lo he hecho utilizando la reflexión sobre mis modelos, creando una integración de jQuery completamente dinámica con validación, pero una versión más simple funcionaría así (esto probablemente funcionará, pero no se ha probado tal como está). Un buen lugar para empezar:

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

y la correspondiente "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

¿Sería una idea usar simplemente el formulario jQuery validation plugin para el lado del cliente? Es fácil de implementar en el código de vista. Agrega algunas etiquetas a los cuadros de entrada y agrega unas pocas líneas de javascript en el encabezado y listo. Por supuesto, todavía tendría que codificar cualquier cosa que sea "muy personalizada", por así decirlo.