asp.net - net - jquery validate mvc

Complemento jQuery Validation en formularios web ASP.NET

Question

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

Solo estoy teniendo algunos problemas 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 cuando llamo a jquery para validar 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>

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

A continuación, se incluyen ejemplos del uso del complemento jQuery Validation con WebForms y la emulación del concepto de grupos de validación . En realidad funciona bastante bien una vez que suaviza un par de problemas.

Answer 2

La información en este artículo me llevó a utilizar Control.ClientID cuando busco una coincidencia con jQuery ... Información muy útil ...

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

Answer 3

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

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

Answer 4

Para SharePoint 2010 encontré con la carga de diferentes controles de usuario como vistas (a través de ajax) que esto funcionó si mueve Javascript a una biblioteca y no puede usar etiquetas de servidor para los identificadores de control de esta manera:

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 $ (documento) .Ready Deberá encapsular el jQuery en una biblioteca de funciones si está cargado en la página Control de usuario en (evento del lado del servidor) pero está bien. en el escenario cargado a través de Ajax con el Panel de Actualización, no bailará.

No he intentado cargar controles de usuario a través de jQuery todavía, parece pesado y parece cargar toda la página, aunque quizás 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 resultó en el mismo o menor tamaño de página que otras técnicas y básicamente cargó datos más rápidos o más rápidos o más rápidos.

Answer 5

Probó lo que dijo Darin Dimitrov y funciona perfectamente, pero si no quiere establecer una clase específica para cada uno de sus campos, puede usar los selectores de 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

Puede verificar la función de agregar reglas , 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 forma, no hay necesidad de preocuparse por los identificadores de mierda generados por el motor de formularios web.

Answer 7

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

Answer 8

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

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

Answer 9

Recomiendo usar jQuery.simple.validator, su validador fácil, liviano 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

Te recomiendo que revises 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 10

Una buena forma de hacerlo 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 11

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