Complemento jQuery Validation en ASP.NET Web Forms

Question

Me gustaría utilizar el complemento jQuery Validation en mi aplicación ASP.NET Web Forms (no MVC). Me resulta más fácil que agregar validadores asp en todas partes y establecer el control para validar el campo en todos ellos.

Estoy teniendo algunos problemas tanto al configurar la clase como esta clase = "correo electrónico requerido", que creo que tiene algo que ver con tener una etiqueta de formulario dentro de la etiqueta principal del formulario.

también me encuentro con problemas al llamar a la validación de jQuery usando los nombres que se convierten en mutilado en un control asp

// validate signup form on keyup and submit 
$("#signupForm").validate({ 
    rules: { 
     username: { 
      required: true, 
      minlength: 2 
     }, }, 
    messages: { 
     username: { 
      required: "Please enter a username", 
      minlength: "username at least 2 characters" 
     }, 
    }. 

....... 

     <p> 
      <label for="username"> 
       Username</label> 
      <input id="username" name="username" /> 
     </p> 

porque este

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox> 

renders como

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" /> 

y destroza el nombre. Puedo obtener ClientID usando <%=tbUsername.ClientID %>, pero eso no funciona con ClientName

¿Alguien ha tenido éxito al usar el plugin validador jquery con asp.net? Si es así, ¿qué pasa con el uso de formularios múltiples, como utilizar grupos de validación por separado?

Answer 1

Puedes retirar el rules add function, pero básicamente esto es lo que puede hacer:

jQuery(function() { 
    // You can specify some validation options here but not rules and messages 
    jQuery('form').validate(); 
    // Add a custom class to your name mangled input and add rules like this 
    jQuery('.username').rules('add', { 
     required: true, 
     messages: { 
      required: 'Some custom message for the username required field' 
     } 
    }); 
}); 

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" /> 

De esta manera no hay necesidad de preocuparse por los identificadores de mierda generados por el motor de formularios web.

Answer 2

Puede comprobar xVal.webForms aquí: http://xvalwebforms.codeplex.com/

Answer 3

recientemente he publicado un parche para xVal.WebForms que resuelve el problema de la transmisión de múltiples formas en la conocida ASP.Net validación de grupo. Este parche también es compatible con la propiedad ASP.Net CausesValidation.

Yo puede leer sobre ello aquí: http://cmendible.blogspot.com/

Answer 4

Éstos son ejemplos de using the jQuery Validation plugin with WebForms y emulating the concept of validation groups con él. En realidad funciona bastante bien una vez que suaviza un par de problemas.

Answer 5

Probado lo que dijo Darin Dimitrov y funciona perfectamente, pero si usted no desea establecer una clase específica a cada uno de sus campos, se puede usar jQuery selectores:

$('form').validate(); 
$('input[id$=Username]').rules('add', { 
    required: true, 
    messages: { 
     required: 'Some custom message for the username required field' 
    } 
}); 

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" /> 

Answer 6

Una gran manera de hacerlo esto es utilizar:

<% =% textbox.Name> o <% =% textbox.ClientId> cada vez que necesite hacer referencia a un elemento servidor.

es decir

var phoneNumb = $('#<%= tPhone.ClientID %>').val(); 

o

$("#signupForm").validate({ 
     rules: { 
       <%= username.Name %>: { 
         required: true, 
         minlength: 2 
       }, }, 
     messages: { 
       <%= username.Name %>: { 
         required: "Please enter a username", 
         minlength: "username at least 2 characters" 
       }, 
     }. 

.......

Answer 7

$("#signupForm").validate({ 
     rules: { 
       <%= tbUsername.UniqueID %>: { 
         required: true, 
         minlength: 2 
       }, }, 
     messages: { 
       <%= tbUsername.UniqueID %>: { 
         required: "Please enter a username", 
         minlength: "username at least 2 characters" 
       }, 
     }); 

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox> 

Answer 8

Para SharePoint 2010 me encontré con la carga de diferentes controles de usuario como puntos de vista (a través de AJAX) que esta funcionado si se mueve Javascript en una biblioteca y no se puede utilizar etiquetas Server con el control de identificación de este tipo:

por ejemplo #<%= tPhone.ClientID %>

$('input[id$=tPhone]').rules('add', 
{  
required: true,  
messages: 
{   
    required: 'Some custom message for the username required field'  
} 
}); 

Además de esto, si se carga dinámicamente un control de usuario a través de Ajax a continuación, no se puede utilizar $ (document) .ready tendrá que encapsular el jQuery en una biblioteca de funciones si es en el control de usuario en la página (evento del lado del servidor) cargar su bien, pero en el escenario de su carga a través de Ajax con el panel de actualización no va a bailar.

No he probado usercontrols de carga a través de jQuery sin embargo, esto se ve pesado y parece cargar la página entera aunque tal vez un poco más rápido o no.

pruebas que comparan técnicas de carga mostraron que el panel de actualización fue más rápido y resultó en los mismos o menores tamaños de página que otras técnicas y básicamente cargado más rápido o muchos más datos tan rápido o más rápido.

Answer 9

La mejor solución es usar "<% = tbUsername.UniqueID%>" en lugar de tbUsername en las reglas de jQuery.

$("#signupForm").validate({ 
rules: { 
    "<%=tbUsername.UniqueID %>": { 
     required: true, 
     minlength: 2 
    }, }, 
messages: { 
    "<%=tbUsername.UniqueID %>": { 
     required: "Please enter a username", 
     minlength: "username at least 2 characters" 
    }, 
}. 

Answer 10

recomiendo el uso de jQuery.simple.validator, su validador fácil, lightweigh y personalizable compatible con las formas asp.net web, porque en el fondo se puede realizar validaciones en cualquier recipiente, no sólo

https://github.com/v2msoft/jquery.simple.validator

recomiendo que revise el plugin y la documentación. Uso:

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script> 

<div id="container"> 
    <!-- REQUIRED FIELD --> 
    <label>Required Field: </label><br/> 
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/> 

    <input type="button" value="Validate" onclick='javascript:validate();' /> 
</div> 


<script type="text/javascript"> 
    function validate() { 
     $("#container").initialize(); 
     var ok = $("#container").validate(); 
     if (!ok) alert("There are errors"); 
     else alert("Form is ok"); 
    } 
</script 

Answer 11

La información in this article me llevó a utilizar Control.ClientID cuando se busca una coincidencia con jQuery ... Información muy útil ...

<label for="<%= tbName.ClientID %>">Name</label> 
<input id="cphBody_tbName" runat="server" .../>