Complemento de validación jQuery en formularios web ASP.NET

Question

Realmente me gustaría usar 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 configurar el control para validar el campo en todos ellos.

Solo tengo algunos problemas cuando configuro 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 de formulario principal.

También me encuentro con problemas al llamar a jquery validate usando los nombres que se destrozan 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 esto

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

se muestra como

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

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

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

Answer 1

Puede verificar las función de agregar reglas , pero básicamente aquí está qué puedes 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 tiene que preocuparse por los malos identificadores generados por el motor de formularios web.

Answer 2

Estos son ejemplos de utilizando jQuery Complemento de validación con WebForms y emulando el concepto de grupos de validación con él. En realidad funciona bastante bien una vez que solucionas un par de problemas.

Answer 3

$("#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 4

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

Answer 5

Probó lo que dijo Darin Dimitrov y funciona perfectamente, pero si no desea establecer una clase específica para cada uno de sus campos, puede usar los selectores jQuery:

$('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

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 7

Recientemente publiqué un archivo de parche para xVal.WebForms que resuelve el problema de múltiples formularios retransmitidos en el conocido Grupo de validación ASP.Net. Este parche también es compatible con la propiedad ASP.Net CausesValidation.

Puedes leer sobre esto aquí: http://cmendible.blogspot.com/

Answer 8

Una excelente manera de hacer esto es usar:

<% = textbox.Name% > o <% = textbox.ClientId% > siempre que necesite hacer referencia a un elemento del 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 9

Para SharePoint 2010 descubrí que al cargar diferentes controles de usuario como vistas (a través de ajax), esto funcionaba si movía JavaScript a una biblioteca y no podía usar etiquetas de servidor para la identificación de control como esta:

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 carga dinámicamente un control de usuario a través de Ajax, entonces no puede usar $ (document) .ready Tendrá que encapsular jQuery en una biblioteca de funciones si está en la página Control de usuario en (evento del lado del servidor) carga bien, pero en el caso de que se cargue a través de Ajax con el Panel de actualización, no funcionará.

Todavía no he intentado cargar los controles de usuario a través de jQuery, esto parece pesado y parece cargar toda la página, aunque tal vez sea un poco más rápido o no.

Las pruebas que compararon las técnicas de carga mostraron que el Panel de actualización fue tan rápido y dio como resultado tamaños de página iguales o menores que otras técnicas y básicamente cargó más rápido o muchos más datos tan rápido o más rápido.

Answer 10

Recomiendo usar jQuery.simple.validator, su validador fácil, ligero y personalizable compatible con formularios web asp.net, porque básicamente puede realizar validaciones en cualquier contenedor, no solo

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

Le recomiendo que revise el complemento 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 en este artículo llevó que use Control.ClientID cuando busque una coincidencia con jQuery ... Información muy útil ...

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