web-dev-qa-db-fra.com

Validation côté client ASP.NET dans une zone de texte sans publication

J'utilise ASP.NET et souhaite effectuer les opérations suivantes côté client, car je ne souhaite pas que la page soit rechargée (je ne souhaite pas de publication). Je voudrais vérifier la saisie de l'utilisateur avec les conditions suivantes:

  1. Il y a 2 boutons radio et 2 zones de texte et 1 bouton. Quelque chose comme ça:enter image description here
  2. L'utilisateur doit cocher le bouton radio pour activer la zone de texte (les zones de texte sont désactivées par défaut)
  3. Si l'utilisateur coche le bouton radio 1, textbox1 sera activé et textbox2 sera vide et désactivé. Si l'utilisateur appuie sur le bouton, textbox1 est vide, le message1 sera activé.
  4. Même chose pour le deuxième radiobutton et textbox2.

Modifier

J'ai remarqué que mon bouton est dans <asp:button> et non pas <input type="submit> donc il va exécuter mon code derrière pour valdier au serveur. Corrigez-moi si je me trompe. Alors, comment puis-je faire mon <asp:button> pour valider la saisie de l'utilisateur sans avoir à passer au serveur? 

javascriptasp.net
9
4 Leave Cover

Tu peux essayer: 

<asp:button onClientClick="return validateData();">

Et dans le JavaScript, cela devrait être: 

function validateData() {
    if (OK) {
        return true;
    } else {
        return false;
    }
}

return true fera afficher votre page sur le serveur et return false empêchera votre page de le faire. J'espère que cela t'aides.

18
Phong Vo

Pour gérer la validation, j'utilisais les validateurs personnalisés ASP.net et jquery pour faciliter la validation côté client:

ASP.net aspx 

<form id="form1" runat="server">
    <div>
        <div id="requiedCheck1" class="check">
           <asp:RadioButton ID="radio1" runat="server" GroupName="myGroup" />
           <asp:TextBox ID="text1" runat="server" Disabled="true"></asp:TextBox>
           <asp:CustomValidator
               ID="val1" runat="server" ErrorMessage="Please Enter Text" ClientValidationFunction="ValidateSomething" ControlToValidate="text1" ValidateEmptyText="true" ></asp:CustomValidator>
        </div>
        <div id="requiedCheck2" class="check">
           <asp:RadioButton ID="radio2" runat="server" GroupName="myGroup" />
           <asp:TextBox ID="text2" runat="server" Disabled="true"></asp:TextBox>
           <asp:CustomValidator
               ID="CustomValidator1" runat="server" ErrorMessage="Please Enter Text" ClientValidationFunction="ValidateSomething" ControlToValidate="text2" ValidateEmptyText="true"></asp:CustomValidator>
        </div>
        <asp:button ID="Button1" runat="server" text="Button" />

    </div>
</form>

Notez que j'ai défini ValidateEmptyText sur true.

js Fonction de validation 

function ValidateSomething(sender, args) {

        args.IsValid = false;
        var parentDiv = $(sender).parent(".check");

        var radioChecked = $(parentDiv).find("input:radio").is(":checked");
        var hasText = $(parentDiv).find("input:text").val().length > 0;



        if (radioChecked) {
            args.IsValid = hasText;
        } else {
            args.IsValid = true;
        }

    }

J'ajouterais aussi une méthode de validation côté serveur.

Si vous voulez vraiment avoir envie, vous devriez aussi pouvoir connecter les boutons radio. Ceci déclenchera la validation lorsque les radiobuttons seront vérifiés

$(document).ready(function () {

    //Wire up the radio buttons to trigger validation this is optional
    $(".check input:radio").each(function () {
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val1.ClientID %>"));
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val2.ClientID %>"));
    }); 

    //jquery to change the disabled state
    $(".check :radio").click(function(){
        var parDiv = $(this).parent(".check"); //get parent div
        //empty text and set all to disabled
        $(".check input:text").val("").prop("disabled", true);

        //set target to enabled
        $(parDiv).find("input:text").prop("disabled", false);
     });           
});

J'ai ajouté le javascript jQuery pour basculer l'état désactivé des zones de texte. Vous pouvez voir la bascule en action ici: http://jsfiddle.net/cVACb/

6
Jon P

vous devriez utiliser jquery pour votre but:

<script>
    $(document).ready(function () {
        var Error = false;
        $("#RadioButton1").click(function () {
            $("#TextBox2").attr("disabled", "disabled");
            $("#TextBox1").removeAttr("disabled");
        });
        $("#RadioButton2").click(function () {
            $("#TextBox1").attr("disabled", "disabled");
            $("#TextBox2").removeAttr("disabled");
        });
        $("#Button1").click(function () {
            var TextBox1value = $("#TextBox1").val();
            var TextBox2value = $("#TextBox2").val();
            var TextBox1Disable = $("#TextBox1").attr("disabled");
            var TextBox2Disable = $("#TextBox2").attr("disabled");

            if ((TextBox1value == "") && TextBox1Disable != "disabled") {
                $("#Label1").text("text can not be empty");
                Error = true;
            }
            if ((TextBox2value == "") && TextBox2Disable != "disabled") {
                $("#Label2").text("text can not be empty");
                Error = true;
            }

        });


        $("#form1").submit(function (e) {
            if (Error) {
                alert("there are Some validation error in your page...!");
                e.preventDefault();
            }

        });

    });
</script>

les éléments du corps sont:

<form id="form1" runat="server">
    <div>
    </div>
    <asp:RadioButton ID="RadioButton1" runat="server" GroupName="g1" /><asp:TextBox ID="TextBox1" runat="server" Enabled="False"></asp:TextBox><asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
    <br />
    <asp:RadioButton ID="RadioButton2" runat="server" GroupName="g1" /><asp:TextBox ID="TextBox2" runat="server" Enabled="False"></asp:TextBox><asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>
0
Mahdi jokar

Est-ce que l'ajout d'un groupe de validation à votre validateur ainsi que le bouton que vous tentiez d'utiliser comme déclencheur pour vérifier la validation? 

Les groupes de validation sont vraiment faciles à utiliser une fois que vous les maîtrisez. Je ne vais pas plonger dans trop de détails sur les validateurs, mais si les informations sont utiles, je peux toujours les ajouter au message. J'espère que vous avez résolu votre réponse. 

0
Eric

Dans votre contrôle de bouton, ajoutez simplement l'extrait suivant:

OnClientClick="if(Page_ClientValidate(ValidateSomething)){this.disabled=true;}"

Vérifiez ce lien asp.net Disable Button after Click tout en conservant CausesValidation et une méthode OnClick

0
Ajay P