jQuery Validierung Plugin in ASP.NET Web Forms

Question

Ich würde gerne das jQuery Validation Plugin in meiner ASP.NET Web Forms-Anwendung (nicht MVC) verwenden. Ich finde es einfacher als Asp-Validatoren überall hinzuzufügen und die Kontrolle zu setzen, um Feld auf allen von ihnen zu validieren.

Ich habe gerade einige Probleme sowohl beim Einstellen der Klasse wie diese Klasse = "erforderliche E-Mail", die ich denke, hat etwas mit einem Formular-Tag innerhalb der Hauptformular-Tag zu tun.

ich auch auf Probleme stoßen, wenn die jquery Validate Aufruf die Namen verwendet, die

in einer ASP-Steuerung verstümmelt werden

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

weil diese

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

macht als

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

und Mangelt den Namen. Ich kann die ClientID mit <%=tbUsername.ClientID %> bekommen, aber das funktioniert nicht mit ClientName

Hat jemand Erfolg mit dem Jquery Validator Plugin mit asp.net gehabt? Wenn ja, wie wäre es mit der Verwendung mehrerer Formulare ähnlich wie mit separaten Validierungsgruppen?

Answer 1

Sie können die rules add function Kasse, aber im Grunde ist hier, was Sie tun können:

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

Auf diese Weise keine Notwendigkeit, über die crappy Kennungen, die durch die Webforms Motor sorgen.

Answer 2

können Sie xVal.webForms hier überprüfen: http://xvalwebforms.codeplex.com/

Answer 3

Ich gab vor kurzem eine Patch-Datei für xVal.WebForms, die die vielfältigen Formen Ausgabe Weiterleitung auf der bekannten ASP.Net Validierung Gruppe aufgelöst wird. Dieser Patch unterstützt auch die ASP.Net CausesValidation-Eigenschaft.

Yo kann darüber lesen Sie hier: http://cmendible.blogspot.com/

Answer 4

Hier sind Beispiele für using the jQuery Validation plugin with WebForms und emulating the concept of validation groups mit ihm. Es funktioniert wirklich gut, wenn Sie ein paar Probleme geglättet haben.

Answer 5

getestet, was Darin Dimitrov sagte und es funktioniert perfekt, aber wenn man nicht eine bestimmte Klasse zu jedem Ihrer Felder setzen möchten, können Sie jQuery Selektoren:

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

Eine gute Möglichkeit, zu tun dies ist zu verwenden:

<% = textbox.Name%> oder <% = textbox.ClientId%>, wenn Sie einen Server Artikel verweisen müssen.

d.h.

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

oder

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

Für Sharepoint 2010 Ich fand mit verschiedenen Benutzersteuerelemente wie Ansichten zu laden (über Ajax), dass dies funktioniert, wenn Sie Javascript in eine Bibliothek zu bewegen und nicht die Server-Tags für die Kontrolle ids wie diese verwenden:

zB #<%= tPhone.ClientID %>

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

Im Anschluss an diese, wenn Sie dynamisch eine Benutzersteuerung über Ajax geladen werden, dann können Sie nicht $ (document) verwenden .ready Sie die kapseln müssen jQuery in einer Funktionsbibliothek, wenn es auf der Seite User Control at (Server-Side-Event) geladen wird, aber im Szenario, das über Ajax mit dem Update-Panel geladen wird, wird es nicht getanzt.

Ich habe noch nicht versucht, usercontrols über jQuery zu laden, das sieht schwer aus und scheint die ganze Seite zu laden, wenn auch vielleicht etwas schneller oder nicht.

Tests zum Vergleich der Ladetechniken zeigten, dass das Update Panel genauso schnell war und zu den gleichen oder kleineren Seitengrößen als andere Techniken führte und im Grunde schneller oder viel mehr Daten schneller oder schneller geladen wurden.

Answer 9

Die beste Lösung ist die Verwendung von "<% = tbUsername.UniqueID%>" anstelle von tBUsername in jQuery-Regeln.

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

Ich empfehle, mit jQuery.simple.validator, ist es einfach, lightweigh und anpassbare Validator kompatibel mit asp.net Web-Formulare, weil es im Grunde Validierungen in jedem Behälter durchführen, nicht nur

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

Ich empfehle Ihnen, das Plugin und die Dokumentation zu überprüfen. Verbrauch:

<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

Die Informationen in this article führte mich Control.ClientID zu verwenden, wenn eine Übereinstimmung mit jQuery ... Sehr nützliche Informationen ...

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