locked
Validate select on .net button control click RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have this select element which I used angular js to populate the select option:

     <select name="ddlMyOption" data-ng-model="myController.model.option" data-ng-options="option.option_id as option.option_name for option in myController.model.options">
                            <option value="">-- Select an option --</option>
                        </select>

    I have this .net button control and on onclick, I would like to validate the select element above both on client and server side as a required field.

    <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="option" OnClick="btnSubmit_Click" />

    Is this possible?

    Thanks. 

    Sunday, October 1, 2017 10:31 PM

All replies

  • User-707554951 posted

    Hi  asplearning,

    Is this possible?

    Yes, it is possible.

    No matter how you fill select, in the browser will be back to show select and option, so if you want to do validation in the client, you just like to verify the same select element to do the same verification.

    If you want to do validation on the server side, I suggest you can save the results in the hidden field so that you can get this value in the onclik event.

    Something code as below:

     <script>
            function fun() {
                var ddl = document.getElementById("cardtype");
                var selectedValue = ddl.options[ddl.selectedIndex].value;
                if (selectedValue == "selectcard") {
                    alert("Please select a card type");
                }
                else {
                    document.getElementById("HiddenField1").value = "True";
               
                    }
            }
        </script>
    
    <select class="rfbs" name="rfbs" style="width: 50px" id="cardtype">
                <option value="selectcard">--- Please select ---</option>
                <option value="mastercard">Mastercard</option>
                <option value="maestro">Maestro</option>
                <option value="solo">Solo (UK only)</option>
            </select><br />
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="option" OnClick="btnSubmit_Click" OnClientClick="fun()" />
    

    CodeBehind:

     protected void btnSubmit_Click(object sender, EventArgs e)
            {
                if (HiddenField1.Value == "True")
                {
                    Response.Write("pass");
                }
                else {
    
                }
            }

    Best regards

    Cathy

    Monday, October 2, 2017 9:11 AM
  • User2108892867 posted

    Thank you Cathy for the reply. Is it possible to have similar validation to the required validation provided by .net? when the user doesn't select the dropdown, the focus should be on the dropdown and perhaps provide error text rather than alert? Because I have other .net controls on the page like textboxes which have required field validation, I would like to provide a very similar validation experience for all the controls rather than having an alert just for the dropdown.

    thanks

    Monday, October 2, 2017 9:24 AM
  • User-707554951 posted

    Hi  asplearning,

    Because I have other .net controls on the page like textboxes which have required field validation, I would like to provide a very similar validation experience for all the controls rather than having an alert just for the dropdown.

    You could use Validating ASP.NET Server Controls, which only works for server control.

    So, you have to use the code above I provided in previous reply to validate your select element.

    You could do some change in js  base on your requirement..e.g when the user doesn't select the dropdown, the focus should be on the dropdown and perhaps provide error text rather than alert?

    https://msdn.microsoft.com/en-us/library/aa479013.aspx

    Best regards

    Cathy

    Monday, October 2, 2017 9:42 AM
  • User2108892867 posted

    Hello Cathy, I am trying test this method and have one question. When the selectedValue is not valid, is there a way I can prevent the button from submitting to the server? I tested on my PC. Although it's not valid, the form is still submitted to the server. 

    Wednesday, October 11, 2017 10:20 PM
  • User-707554951 posted

    Hi  asplearning,

    When the selectedValue is not valid, is there a way I can prevent the button from submitting to the server?

    Use the following code:

     <script type="text/javascript">
            function fun() {
                var ddl = document.getElementById("cardtype");
                var selectedValue = ddl.options[ddl.selectedIndex].value;
                if (selectedValue == "selectcard") {
                    alert("Please select a card type");
                    return false;
                }
                else {
                    document.getElementById("HiddenField1").value = "True";
               
                    }
            }
        </script>
     <select class="rfbs" name="rfbs"  id="cardtype">
                <option value="selectcard">--- Please select ---</option>
                <option value="mastercard">Mastercard</option>
                <option value="maestro">Maestro</option>
                <option value="solo">Solo (UK only)</option>
            </select><br />
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="option" OnClick="btnSubmit_Click" OnClientClick=" return fun()" />

    Codebehind:

     protected void btnSubmit_Click(object sender, EventArgs e)
            {
                if (HiddenField1.Value == "True")
                {
                    Response.Write("pass");
                }
                else
                {
                    Response.Write("failed");
                }
            }

    Best regards

    Cathy

    Thursday, October 12, 2017 1:38 AM