Wtyczka walidacji jQuery w ASP.NET Web Forms

Question

Bardzo chciałbym użyć wtyczki walidacji jQuery w mojej aplikacji ASP.NET Web Forms (nie MVC). Uważam, że jest to łatwiejsze niż dodawanie walidatorów asp wszędzie i ustawienie kontroli do sprawdzania poprawności pola na każdym z nich.

Mam tylko pewne problemy zarówno przy ustawianiu klasy takiej jak ta klasa = "wymagana wiadomość e-mail", co, jak sądzę, ma coś wspólnego z posiadaniem znacznika formularza w głównym znaczniku formularza.

ja również uruchomić w kwestii podczas wywoływania validate jquery używając nazw, które stają się zniekształcone w kontrolce 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> 

ponieważ

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

renderuje jako

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

i wymazuje nazwę. Mogę uzyskać identyfikator klienta przy użyciu <%=tbUsername.ClientID %>, ale to nie działa z ClientName

Czy ktoś miał jakieś sukcesy za pomocą wtyczki walidatora jquery z asp.net? Jeśli tak, co z wykorzystaniem wielu formularzy, podobnie jak przy użyciu oddzielnych grup sprawdzania poprawności?

Answer 1

można sprowadzić rules add function, ale w zasadzie oto co można zrobić:

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

W ten sposób nie trzeba się martwić o gównianych identyfikatorów generowanych przez silnik WebForms.

Answer 2

Można sprawdzić xVal.webForms tutaj: http://xvalwebforms.codeplex.com/

Answer 3

Niedawno napisali patch dla xVal.WebForms który rozwiązuje problem wielu form sanitarną na dobrze znanym ASP.Net walidacji Group. Ta poprawka obsługuje również właściwość ASP.Net PrzyczynyValidation.

Yo można przeczytać o tym tutaj: http://cmendible.blogspot.com/

Answer 4

Oto przykłady using the jQuery Validation plugin with WebForms i emulating the concept of validation groups z nim. To faktycznie działa całkiem dobrze, gdy wygładzisz kilka problemów.

Answer 5

Testowany co powiedział Darin Dimitrov i działa doskonale, ale jeśli nie chcesz ustawić konkretną klasę do każdego z pól, można użyć jQuery selektorów:

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

świetny sposób, aby zrobić to jest użycie:

<% = textbox.Name%> lub <% = textbox.ClientId%> kiedy trzeba odwołać się do elementu serwera.

tj

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

lub

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

Dla SharePoint 2010 I z wkładaniu różnych UserControls jako poglądów (za pośrednictwem AJAX), że pracowali po przeniesieniu JavaScript do biblioteki i nie można używać znaczników serwera dla kontroli identyfikatorów, jak to stwierdzono:

np #<%= tPhone.ClientID %>

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

W nawiązaniu do tego, jeśli dynamicznie załadować formantu użytkownika za pośrednictwem AJAX to nie można użyć $ (document) .ready będziesz miał do kapsułkowania jQuery w bibliotece funkcji, jeśli jest na stronie Kontrola użytkownika na stronie (zdarzenie po stronie serwera) ładuje swoją grzywnę, ale w scenariuszu jest ładowany przez Ajax z panelem aktualizacji, który nie będzie tańczył.

Nie próbowałem jeszcze ładować usercontrols przez jQuery, wygląda na to, że ładuje się całą stronę, choć może trochę szybciej.

Testy porównujące techniki ładowania pokazały, że panel aktualizacji działał tak samo szybko i dawał takie same lub mniejsze rozmiary stron niż inne techniki i zasadniczo ładował szybciej lub o wiele więcej danych tak szybko lub szybciej.

Answer 9

Najlepszym rozwiązaniem jest użycie "<% = tbUsername.UniqueID%>" zamiast tbUsername w regułach 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

Polecam używanie jQuery.simple.validator, jego łatwy, lightweigh i konfigurowalny walidator zgodną z form asp.net internetowych, ponieważ w zasadzie można go wykonać walidację w jakimkolwiek pojemniku, nie tylko

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

Polecam sprawdzić wtyczkę i dokumentację. Zastosowanie:

<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

Informacje in this article doprowadziło mnie do korzystania Control.ClientID patrząc na mecz z jQuery ... Bardzo przydatne informacje ...

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