it-swarm.com.de

plug-In für jQuery-Überprüfung in ASP.NET-Web Forms

Ich möchte das Plugin für jQuery Validation in meiner ASP.NET-Web Forms-Anwendung (nicht MVC) verwenden. Ich finde es einfacher, ASP-Validatoren überall hinzuzufügen und das Steuerelement so zu setzen, dass das Feld für alle validiert wird. 

Ich habe nur ein paar Probleme, wenn Sie die Klasse wie "class =" required email "einstellen, was meiner Meinung nach etwas mit einem Form-Tag im Haupt-Form-Tag zu tun hat.

Ich stoße auch auf Probleme, wenn ich die Jquery validate mit den Namen benenne, die in einem asp-Steuerelement 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 das 

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

macht als 

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

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

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

43
eiu165

Sie können die Rules Add-Funktion auschecken, aber im Grunde haben Sie folgende Möglichkeiten:

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 müssen Sie sich nicht um die von der Webforms-Engine generierten beschissenen Bezeichner kümmern.

46
Darin Dimitrov

Hier sind Beispiele für die Verwendung von mit dem jQuery Validation-Plugin mit WebForms und das Konzept von Validierungsgruppen und damit emuliert. Es funktioniert eigentlich ziemlich gut, wenn Sie ein paar Probleme beseitigt haben.

11
Dave Ward
$("#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>
11
1984kg

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

4
Carlos Mendible

Die beste Lösung ist "<% = tbUsername.UniqueID%>" anstelle von tbUsername in den 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"
    }, 
}.
2
Jackie

Getestet, was Darin Dimitrov gesagt hat, und es funktioniert perfekt. Wenn Sie jedoch nicht für jedes Ihrer Felder eine bestimmte Klasse festlegen möchten, können Sie jQuery-Selektoren verwenden:

$('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" />
2
C.Hoffmann

Die Informationen in diesem Artikel haben mich dazu gebracht, Control.ClientID zu verwenden, wenn Sie mit jQuery nach einer Übereinstimmung suchen ... Sehr nützliche Informationen ...

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

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

<% = textbox.Name%> oder <% = textbox.ClientId%> , wenn Sie ein Serverelement referenzieren 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"
                }, 
        }.

.......

0
Adam

Ich habe kürzlich eine Patch-Datei für xVal.WebForms veröffentlicht, die das Weiterleiten von Formularen für die bekannte ASP.Net-Validierungsgruppe löst. Dieser Patch unterstützt auch die ASP.Net-Ursachenvalidierungs-Eigenschaft.

Ihr könnt es hier lesen: http://cmendible.blogspot.com/

0
Carlos Mendible

Für SharePoint 2010 habe ich beim Laden verschiedener Benutzersteuerelemente als Ansichten (über Ajax) festgestellt, dass dies funktioniert, wenn Sie Javascript in eine Bibliothek verschieben und keine Server-Tags für die Steuerelement-ID verwenden können.

z. B. #<%= tPhone.ClientID %>

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

Wenn Sie außerdem ein Benutzersteuerelement dynamisch über Ajax laden, können Sie $ (document) .ready .__ nicht verwenden. Sie müssen jQuery in einer Funktionsbibliothek einkapseln, wenn diese auf der Seite Benutzersteuerelement auf (serverseitiges Ereignis) geladen wird Es ist in Ordnung, aber in diesem Szenario wird es über Ajax mit dem Update-Panel geladen. 

Ich habe noch nicht versucht, UserControls über jQuery zu laden. Das sieht schwer aus und scheint die gesamte Seite zu laden, auch wenn sie vielleicht etwas schneller ist oder nicht. 

Tests zum Vergleich der Ladetechniken zeigten, dass das Update-Panel genauso schnell war und dasselbe oder kleinere Seitengrößen als bei anderen Techniken aufwies und im Wesentlichen schneller oder viel mehr Daten als schneller oder schneller geladen wurde.

0
jason robertson

Ich empfehle die Verwendung von jQuery.simple.validator, seinem einfachen, leichtgewichtigen und anpassbaren Validator, der mit asp.net-Webformularen kompatibel ist, da grundsätzlich Validierungen in jedem Container durchgeführt werden können, nicht nur 

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

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

<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
0
Christian