jQuery-Validierung - Mehrere submit-buttons auf einer asp.net form, verschiedenen Validierung Gruppen?

Habe ich eine asp.net -Formular mit einer login-Bereich und ein register Abschnitt. Es gibt zwei submit-buttons, die entsprechen zu den entsprechenden Bereich, login oder registriere dich. Ich bin mit jquery Validierung, aber ich kann nicht einen Weg finden, um anzugeben, Validierung Gruppen als würde ich mit normalen asp.net die Validierung. Wenn ich auf den registrieren-button, jetzt ist es zu Fragen für die login-Felder ausgefüllt werden. Jemand habe irgendwelche Gedanken zu dieser? DANKE!

InformationsquelleAutor bmorehokie | 2009-10-21
  1. 5

    Ich vermute, Sie sind mit dieser Validierung plugin: JQuery Validierung . Das plugin verwendet das form-tag als eine Gruppe Validierung so zu erreichen, was Sie wollen, Sie müssen nehmen die Regeln, je nachdem, auf welche Schaltfläche der Benutzer drückt. Auch, müssen Sie die Regeln wieder, die für den Fall, wenn die Validierung fehlschlägt, dann entscheidet der Anwender, klicken Sie auf die Schaltfläche andere.

    Hier ein Beispiel:

    $(document).ready(function()
{
    $("#form").validate({
        invalidHandler: addRules 
    });        

    addRules();        

    $("#submit1").click(function(){
        $(".group2").each(function(){
            $(this).rules("remove");
        });
    });
    $("#submit2").click(function(){
        $(".group1").each(function(){
            $(this).rules("remove");
        });
    });

});
var addRules = function(){
    $("#input1").rules("add", {required:true});
    $("#input2").rules("add", {required:true});
}

    Dieser Ansatz ermöglicht Ihnen das hinzufügen, ein class-Attribut (group1 oder group2) an jedem Ihrer Eingänge, die fungiert als eine Gruppe Validierung.

    • wenn es nur so leicht wäre. In asp.net Sie kann nur ein <form runat="server"> tag. Daher muss ich wissen, ob es so etwas wie validationgroups (die normale asp.net Validierung verwendet).
    • Ich sehe. Ich aktualisiert meine Antwort an-Adresse, die.
    • Sie wissen, wie man deaktivieren, jquery Validierung für einen submit-button? Ich habe zwei submit-buttons auf meiner form: Submit und Cancel. Muss ich deaktivieren Sie die Validierung für die Schaltfläche "Abbrechen".
    InformationsquelleAutor Jataro
  2. 1

    Anstatt zu schreiben Seite-spezifischen code, um dieses Problem zu umgehen nutzen Sie die folgende Bibliothek:

    https://github.com/bbraithwaite/JQueryValidationForWebForms

    NB Source code ist unten, aber die Github-link haben immer die aktuellste Quelle.

    Es sitzt auf der Oberseite des jQuery Validation Framework und abstracts Weg, dieses problem durch die Verwendung von Klassennamen als eine Konvention.

    Registrieren Sie die validation-Ereignis in der gleichen Weise wie jQuery Validierung (nur mit einem anderen Namen):

    $(function() {
    $("#aspForm").validateWebForm();
});

    Beispiel .ASPX

    Basic .aspx Beispiel mit Validierung zwei Gruppen Aussehen könnte, wie auf der Abbildung. Sie würde einfach wickeln Sie jeden logischen Abschnitt und geben Sie einen Klassennamen von "form" und auf die Aktion für das auslösen der Validierung Fall fügen Sie einfach die Klasse "submit":

     <fieldset class="form">
 <div class="something">
 <ul></ul>
 </div>
 <legend>Sign Up</legend>
 <p>
 <asp:Label ID="uiFirstName" runat="server" AssociatedControlID="uxFirstName" Text="First name:"></asp:Label>
 <asp:TextBox ID="uxFirstName" runat="server" CssClass="required"></asp:TextBox>
 </p>
 <p>
 <asp:Button ID="uxRegister" runat="server" Text="Sign Up" CssClass="submit signup" />
 <asp:Button ID="uxCancelRegister" runat="server" Text="Cancel" />
 </p>
 </fieldset>
 <fieldset class="form">
 <legend>Login</legend>
 <p>
 <asp:Label ID="uiUserName" runat="server" AssociatedControlID="uxUserName" Text="User name:"></asp:Label>
 <asp:TextBox ID="uxUserName" runat="server" CssClass="required email"></asp:TextBox>
 </p>
 <p>
 <asp:Button ID="uxLogin" runat="server" Text="Login" CssClass="submit login" />
 <asp:Button ID="uxCancelSignUp" runat="server" Text="Cancel" />
 </p>
 </fieldset>

    Quellcode

    (function ($) {

    $.extend($.fn, {
        validateWebForm: function (options) {

            var form = $(this[0]),
                formExists = (form.length) && form.is('form');

            if (formExists) {
                if (!options) {
                    options = {};
                }

                //stop the validation from firing on the form submit
                options.onsubmit = false;

                //wire up the default jquery validation event to the form
                this.validate(options);

                //Select any input[type=text] elements within a validation group
                //and attach keydown handlers to all of them.
                $('.form :text').keydown(function (event) {
                    //Only execute validation if the key pressed was enter.
                    if (event.keyCode == 13) {
                        $(event.currentTarget).closest(".form").find(".submit").click();
                    }
                });

                //find the submit buttons and override the click event
                form.getSumbitControls().click(this.validateAndSubmit);

                return this;
            }

            return undefined;
        },
        getSumbitControls: function () {
            return $(this).find('.form .submit');
        },
        getValidationContainer: function (submitControl) {
            return $(submitControl).closest('.form');
        },
        validateAndSubmit: function (event) {
            //Ascend from the button that triggered this click event 
            //until we find a container element flagged with 
            //.validationGroup and store a reference to that element.
            var group = $(this).getValidationContainer(event.currentTarget),
                isValid = true;

            //Descending from that .form element, find any input
            //elements within it, iterate over them, and run validation on 
            //each of them.
            group.find(':input').each(function (i, item) {
                if (!$(item).valid()) {
                    isValid = false;
                }
            });

            //If any fields failed validation, prevent the button's click 
            //event from triggering form submission.
            if (!isValid) {
                event.preventDefault();
            }
        }
    });

})(jQuery);

    Nuget Benutzer

    PM> Install-Paket JQuery.Die Validierung.WebForms

    Entwickelte sich aus dem Lesen Sie den folgenden Beitrag von Dave Ward:

    http://encosia.com/asp-net-webforms-validation-groups-with-jquery-validation/

    • +1 für die encosia link.. 🙂
    InformationsquelleAutor Bradley Braithwaite
  3. 1

    Können Sie immer verwenden einige einfache jquery/javascript zu entfernen, die "validate[required]" Klasse auf dem asp-button OnClientClick und fügen Sie es anschließend wieder auf die anderen Tasten OnClientClick-was ist einfacher als eine änderung der validationengine Dateien oder ersetzen Sie Sie. Ein Beispiel dafür wäre:

    <div id="Login">
    <asp:TextBox ID="txtUser" runat="server" CssClass="validate[required]"></asp:TextBox>
    <asp:TextBox ID="txtPass" runat="server" CssClass="validate[required]"></asp:TextBox>
    <asp:Button ID="btnLogin" runat="server" OnClientClick="disableReg();" OnClick="btnLogin_Click" />
</div>
<div id="Register">
    <asp:TextBox ID="txtName" runat="server" CssClass="validate[required]"></asp:TextBox>
    <asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required]"></asp:TextBox>
    <asp:Button ID="btnReg" runat="server" OnClientClick="disableLogin();" OnClick="btnReg_Click" />
</div>

    Javascript wäre:

    function disableReg() {
    $('#<%=txtName.ClientID%>').removeClass("validate[required]");
    $('#<%=txtEmail.ClientID%>').removeClass("validate[required]");
    $('#<%=txtUser.ClientID%>').addClass("validate[required]");
    $('#<%=txtPass.ClientID%>').addClass("validate[required]");
    return true;
}

function disableLogin() {
    $('#<%=txtUser.ClientID%>').removeClass("validate[required]");
    $('#<%=txtPass.ClientID%>').removeClass("validate[required]");
    $('#<%=txtName.ClientID%>').addClass("validate[required]");
    $('#<%=txtEmail.ClientID%>').addClass("validate[required]");
    return true;
}
    • Danke! @Jounty
    InformationsquelleAutor Jonty
  4. 0

    Verfolgen Sie die validation-Objekt und entfernen/ersetzen-Regeln direkt. Funktioniert bei mir mit v1.13.0

    var validation = $('#form1').validate(); //Keep track of validation object

//Rule set 1
var validationRulesLogin = {
    headerEmail: {
        required: true,
        email: true
    },
    headerPassword: "required"
};
var validationMessagesLogin = {
    headerEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    headerPassword: "Please enter your password."
};

//Rule set 2
var validationRulesSignup = {
    signupEmail: {
        required: true,
        email: true
    },
    signupPassword: "required",
    signupPassword2: {
        equalTo: "#phBody_txtNewPassword"
    }
};
var validationMessagesSignup = {
    signupEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    signupPassword: "Please enter your password.",
    signupPassword2: "Passwords are not the same."
};

//Toggle rule sets on form focus, button click or other event.
function validatingLoginForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesLogin;
    validation.settings.messages = validationMessagesLogin;
}
function validationSignupForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesSignup;
    validation.settings.messages = validationMessagesSignup;
}
    InformationsquelleAutor Dan
  5. -1

    wenn Sie mit unobtrusive jquery Validierung, alternativ können Sie auch dieses verwenden:

    $(document).ready(function () {

    var formValidator = $("form").validate();

    $("#btnLogin").click(function () {
        formValidator.settings.ignore = "#registerSection *";
    });

    $("#btnRegister").click(function () {
        formValidator.settings.ignore = "#loginSection *";
    });
});
    InformationsquelleAutor Mustafa Düman
  6. -2

    Machen ASP.NET server-Validierung Logik zur Verfügung, um client-side - /jQuery-durch die Anbringung von speziellen CSS-Klassennamen auf die HTML-Elemente, die server-seitige Validierung Steuerelemente.

    Den CSS-Klassennamen erzeugt wird vertreten Validierung Gruppen. Also ,zum Beispiel, einige Textboxen und die Tags mit dem class-name für eine Gruppe Validierung und andere Textfelder für eine andere Gruppe Validierung.

    Schreiben Sie zum Beispiel, und rufen Sie die C# - Funktion in die Seite PreRender-handler, oder bevor die Seite gerendert wird, zu verleihen-server-Steuerelemente mit speziellen CSS.

    ///<summary>
///Makes the server validation logic knowledge available to the client side
///by appending css class names to validators and html elements being validated.
///The generated css classes can be targeted by jQuery in the DOM.
///</summary>
///<param name="cssPrefixValidator">prefix string for validator css names</param>
///<param name="cssPrefixTarget">prefix string for target element css names</param>
///<remarks>
///The css prefix arguments to this function help distinguish between what is a 
///validation control and what is an html element being targeted by said validation control.
///</remarks>
///
void TagValidationWithCss(string cssPrefixValidator, string cssPrefixTarget) {

    List<string> valClasses = new List<string>();
    List<string> targetClasses = new List<string>();

    //iterate over validator server controls
    foreach (BaseValidator val in Page.Validators) {

        //keep a unique list of generated validator css class names
        string classnameVal = cssPrefixValidator + val.ValidationGroup;
        if (!valClasses.Contains(classnameVal))
            valClasses.Add(classnameVal);
        //..and mark the validator element with the generated css class name
        val.CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameVal;

        //keep a unique list of generated target element css class names
        string classnameTarg = cssPrefixTarget + val.ValidationGroup;
        if (!targetClasses.Contains(classnameTarg))
            targetClasses.Add(classnameTarg);
        //..and mark the target element with the generated css class name
        Control target = FindControl(val.ControlToValidate);
        if (target is HtmlControl)
            ((HtmlControl)target).Attributes["class"] += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg;
        else if (target is WebControl)
            ((WebControl)target).CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg;
    }

    //output client script having array of validator css names representing validation groups
    string jscriptVal = string.Format("<script>window['{1}'] = ['{0}'];</script>", string.Join("','", valClasses.ToArray()), cssPrefixValidator);
    ClientScript.RegisterStartupScript(this.GetType(), "val", jscriptVal);

    //output client script having array of html element class names representing validation groups
    string jscriptTarg = string.Format("<script>window['{1}'] = ['{0}'];</script>", string.Join("','", targetClasses.ToArray()), cssPrefixTarget);
    ClientScript.RegisterStartupScript(this.GetType(), "targ", jscriptTarg);
}

    Die Funktion wird aufgerufen, in der server-Seite:

    protected override void OnPreRender(EventArgs e) {
    base.OnPreRender(e);

    TagValidationWithCss("validator-", "target-");
}

    Die deklarative syntax der ASPX-Seite vielleicht Ihrem zwei Abschnitte etwa so:

    <div>

Login Section
    <asp:TextBox ValidationGroup="vg1" ID="TextBox1" runat="server"></asp:TextBox><asp:TextBox
        ValidationGroup="vg1" ID="Textbox2" runat="server"></asp:TextBox><asp:Button ID="Button1"
            ValidationGroup="vg1" runat="server" Text="Button" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox1"
        ErrorMessage="RequiredFieldValidator" ValidationGroup="vg1"></asp:RequiredFieldValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Textbox2"
        ErrorMessage="RequiredFieldValidator" ValidationGroup="vg1"></asp:RequiredFieldValidator>

    <hr />

Registration Section
    <asp:TextBox ValidationGroup="vg2" ID="TextBox4" runat="server"></asp:TextBox><asp:TextBox
        ValidationGroup="vg2" ID="Textbox5" runat="server"></asp:TextBox><asp:Button ID="Button3"
            ValidationGroup="vg2" runat="server" Text="Button" />
</div>

    Nun über die gerenderte Seite, die die Ergebnisse sehen .....

    Die Seite HTML-Quelltext enthält arrays der erzeugten CSS-Namen vertreten Validierung Gruppen, ein Satz für Validatoren (Validators-) und andere für die Ziele der Validierung (Ziel-)

    <script>window['validator-'] = ['validator-vg1','validator-vg2'];</script>
<script>window['target-'] = ['target-vg1','target-vg2'];</script>

    Diese CSS-Namen sind auch die Darstellung auf der html-Elemente. Hinweis "Ziel-vg1" CSS-Klassen für text-Felder hier, stellvertretend für die Validierung Gruppe #1. Die text-Felder stellen den login-screen/interface auf der Seite (eine von zwei UI-Teile):

    <input name="TextBox1" type="text" id="TextBox1" class=" target-vg1" /><input name="Textbox2" type="text" id="Textbox2" class=" target-vg1" /><input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;vg1&quot;, &quot;&quot;, false, false))" id="Button1" />

    Diese zweite Gruppe von Textfeldern ist auf der gleichen ASP.NET Seite (in der gleichen ASP.NET Form) und stellen Sie die Benutzer-Registrierung-Bildschirm/interface (das zweite UI-Teil). Beachten Sie diese Textfelder markiert sind und eine andere Gruppe Validierung mit dem Namen "Ziel-vg2" durch die css-Klasse.

     <input name="TextBox4" type="text" id="TextBox4" class=" target-vg2" /><input name="Textbox5" type="text" id="Textbox5" class=" target-vg2" /><input type="submit" name="Button3" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button3&quot;, &quot;&quot;, true, &quot;vg2&quot;, &quot;&quot;, false, false))" id="Button3" />

    Also wir injizierten speziellen Css-Namen in die ASP.NET fließen, ohne Sie zu unterbrechen oder zu zerbrechen.

    Letztlich diese spezielle Ausgabe können Sie benutzerdefinierte Skripts schreiben gegen Sie (z.B. mit jQuery) greifen auf diese spezielle CSS-Klassennamen und die Unterscheidung zwischen Validierung Gruppen auf der client-Seite.

    Diesem einfachen Beispiel warnt den Namen der Validierung Gruppen auf der client-Seite zu beweisen, dass Sie gesehen und erkannt. Uff! 

    <script>
    //Tell the CSS names of the available validation groups assigned to target elements.
    var strGroups = 'css validation groups are: ' + window['target-'].join(', ');
    alert(strGroups);
</script>

    jQuery benutzt werden kann um auf die speziellen css-Klassen zu.

    Diese nicht alle Fälle abdecken kann. Es könnte wirklich zum Mittagessen, aber war interessant zu machen. Die server - und client-code kann optimiert werden müssen, um persönliche oder Projekt-Geschmack.

    (Sie wollen auch auf die Tatsache stützen, dass neuere Browser können verschiedene CSS-Klassen, um ein element mit Hilfe des 'class' - Attribut durch die Trennung der Klasse Namen mit Leerzeichen e.g - class="vg1 animierte helle myclass Ihrer Klasse". Dies ermöglicht den generierten css-Klassennamen angehängt werden, nach den bestehenden Klassen-Namen, ohne dass diese überschrieben werden.)

    • Weg, Weg, Weg, zu kompliziert. Ich will nicht einmal darüber nachdenken, server-side-code für etwas so einfach, dass muss nicht kompliziert sein.
    InformationsquelleAutor John K
Schreibe einen Kommentar