jQuery Validation plugin de em ASP.NET Web Forms

Question

Eu gostaria realmente de uso do jQuery Validation plugin de no meu aplicativo de formulários ASP.NET Web (não MVC). Acho que é mais fácil do que adicionar validadores de asp em toda parte e definir o controle de campo de validação em todos eles.

Eu apenas estou tendo alguns problemas tanto ao definir a classe como este class = "email necessária" que eu acho que tem algo a ver com ter uma tag de formulário dentro da principal marca de formulário.

Eu também ter problemas quando chamado a validar jquery usando os nomes que se tornam mutilados em um controle 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>

processa como

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

e mangles o nome. Posso obter o ClientID usando <%=tbUsername.ClientID %>but que não funciona com ClientName

Alguém já teve algum sucesso usando o jquery validador plugin com asp.net? Se assim o que sobre o uso de múltiplas formas muito parecido com o uso de grupos de validação separadas?

Answer 1

Você pode verificar a função regras adicionar , mas basicamente é aqui o que você pode fazer:

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

Desta forma, não há necessidade de se preocupar com os identificadores de baixa qualidade gerados pelo motor de webforms.

Answer 2

Aqui estão exemplos de usando o jQuery validação plugin com WebForms e emulando o conceito de grupos de validação com ele. Ele realmente funciona muito bem uma vez que você suavizar algumas questões.

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

Você pode verificar xVal.webForms aqui: http://xvalwebforms.codeplex.com/

Answer 5

Testado que Darin Dimitrov disse e ele funciona perfeitamente, mas se você não quiser definir uma classe específica para cada um dos campos, você pode usar seletores 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

A melhor solução é o uso "<% = tbUsername.UniqueID%>" em vez de tbUsername nas regras 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

Eu recentemente postou um arquivo patch para xVal.WebForms que resolve as múltiplas formas emitem afinação na conhecida validação Grupo ASP.Net. Este patch também suporta a propriedade ASP.Net CausesValidation.

Yo pode ler sobre ele aqui: http://cmendible.blogspot.com/

Answer 8

Uma ótima maneira de fazer isso é usar:

<% = textbox.Name%> ou <% = textbox.ClientId%> sempre que você precisar fazer referência a um item de servidor.

i.

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

ou

$("#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 eu encontrei com o carregamento de diferentes usercontrols como vistas (via Ajax) que este trabalhou se você mover javascript em uma biblioteca e não pode usar tags do servidor para o controle da id como este:

por exemplo #<%= tPhone.ClientID %>

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

Além disto, se você carregar dinamicamente um controle de usuário via Ajax, então você não pode usar $ (document) .ready Você terá que encapsular o jQuery em uma biblioteca de funções se o no User Control em (servidor de eventos lado) página carregará o seu bem, mas no cenário de seu carregado via Ajax com o painel de atualização não vai dançar.

Eu não tentei usercontrols carregamento via jQuery ainda, este pesado aparência e parece carregar a página inteira embora talvez um pouco mais rápido ou não.

testes comparando técnicas de carregamento mostrou o painel de atualização era tão rápido e resultou nos mesmos ou menores tamanhos de página do que outras técnicas e, basicamente, carregado mais rápido ou muito mais dados como rápido ou mais rápido.

Answer 10

Eu recomendo usar jQuery.simple.validator, é fácil, lightweigh e personalizável validador compatível com formulários asp.net web, porque, basicamente, ele pode executar validações em qualquer recipiente, não só

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

Eu recomendo que você verifique o plugin e documentação. 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

As informações neste artigo levou -me a usar Control.ClientID quando se olha para uma partida com jQuery ... informação muito útil ...

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