locked
Radio button validation RRS feed

  • Question

  • User-243787542 posted

    Hello everyone.
    I have 2 groups of asp:RadioButton in my asp.net webform page. I have a validator on OnClientClick="return Validate();".
    My problem is when I click the button both radioButton groups show the error message if nothing is selected, I select an option,
    for the Recomend group the error message dissapear, but for the Price proup it is still showing the error message.

    Here is my code. Any help would be appreciated.

    <div class="col-xs-12 col-sm-6 col-md-12 inputcol first">
       <label class="radio-inline pull-right" for="signup_name">Recomend</label>
       <label class="radio-inline"><asp:RadioButton ID="rbtnRecomendYes" runat="server" GroupName="recomend" Text="Yes"  required /></label>
       <label class="radio-inline"><asp:RadioButton ID="rbtnRecomendNo" runat="server" GroupName="recomend" Text="No"  required /></label>
       <p id="recomendErr" class="red"></p>
    </div> <div class="col-xs-12 col-sm-6 col-md-4 inputcol first"> <label class="radio-inline pull-right" for="signup_name">Price</label> <label class="radio-inline"><asp:RadioButton ID="rbtnPriceYes" runat="server" GroupName="budget" Text="Yes" required /></label> <label class="radio-inline"><asp:RadioButton ID="rbtnPriceNo" runat="server" GroupName="budget" Text="No" required /></label> <p id="priceErr" class="red"></p> </div> <div class="col-xs-12 col-sm-6 col-md-12 inputcol button-side"> <asp:Button ID="btnSave" runat="server" class="form-group form-control btn btn-primary" Text="Save" OnClick="btnSave_Click" OnClientClick="return Validate();" /> </div> <script type="text/javascript"> function Validate() { var yesRec = document.getElementById("rbtnRecomendYes"); var noRec = document.getElementById("rbtnRecomendNo"); var yesPrice = document.getElementById("rbtnPriceYes"); var noPrice = document.getElementById("rbtnPriceNo"); if (yesRec.checked != true && noRec.checked != true) { document.getElementById("recomendErr").innerHTML = "Please Select Yes or No"; } else { document.getElementById("recomendErr").innerHTML = ""; } if (yesPrice != true && noPrice != true){ document.getElementById("priceErr").innerHTML = "Please Select Yes or No"; } else { document.getElementById("priceErr").innerHTML = ""; } } </script>

    Wednesday, December 27, 2017 8:36 PM

Answers

  • User2103319870 posted

    plazzasele

    for the Recomend group the error message dissapear, but for the Price proup it is still showing the error message.
    if (yesPrice != true && noPrice != true){

    You need to add the checked property in your if condition

      <script type="text/javascript">
                function Validate() {
                    var yesRec = document.getElementById("rbtnRecomendYes");
                    var noRec = document.getElementById("rbtnRecomendNo");
                    var yesPrice = document.getElementById("rbtnPriceYes");
                    var noPrice = document.getElementById("rbtnPriceNo");
                    if (yesRec.checked != true && noRec.checked != true) {
                        document.getElementById("recomendErr").innerHTML = "Please Select Yes or No";
                    }
                    else {
                        document.getElementById("recomendErr").innerHTML = "";
                    }
                    //Here add the checked property in your if condition
                    if (yesPrice.checked != true && noPrice.checked != true) {
                        document.getElementById("priceErr").innerHTML = "Please Select Yes or No";
                    }
                    else {
                        document.getElementById("priceErr").innerHTML = "";
                    }
                    return false;
                }
            </script>

    Demo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 27, 2017 11:30 PM
  • User-707554951 posted

    Hi plazzasele,

    As a2h suggest, you should get the value of checked property for radioButton first,

    Then to checked it in if statement.

    The getElementById() method returns the element, so, it always not equal to true. "yesPrice!= true"  "noPrice != true" return true. The following code will always be executed  

    document.getElementById("recomendErr").innerHTML = "Please Select Yes or No";

    Working code as below:

      <script type="text/javascript">
                    function Validate() {
                        var yesRec = document.getElementById("rbtnRecomendYes");
                        var noRec = document.getElementById("rbtnRecomendNo");
                        var yesPrice = document.getElementById("rbtnPriceYes").checked;
                        var noPrice = document.getElementById("rbtnPriceNo").checked;
                        if (yesRec.checked != true && noRec.checked != true) {
                            document.getElementById("recomendErr").innerHTML = "Please Select Yes or No";
                          
                        }
                        else {
                            document.getElementById("recomendErr").innerHTML = "";
                       
                        }
                        if (yesPrice!= true && noPrice!= true) {
                            document.getElementById("priceErr").innerHTML = "Please Select Yes or No";
                     
                        }
                        else {
                            document.getElementById("priceErr").innerHTML = "";
    
                        }
                        return false;
                    }
                </script>

    Output:

    Best regards 

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 28, 2017 2:37 AM

All replies

  • User2103319870 posted

    plazzasele

    for the Recomend group the error message dissapear, but for the Price proup it is still showing the error message.
    if (yesPrice != true && noPrice != true){

    You need to add the checked property in your if condition

      <script type="text/javascript">
                function Validate() {
                    var yesRec = document.getElementById("rbtnRecomendYes");
                    var noRec = document.getElementById("rbtnRecomendNo");
                    var yesPrice = document.getElementById("rbtnPriceYes");
                    var noPrice = document.getElementById("rbtnPriceNo");
                    if (yesRec.checked != true && noRec.checked != true) {
                        document.getElementById("recomendErr").innerHTML = "Please Select Yes or No";
                    }
                    else {
                        document.getElementById("recomendErr").innerHTML = "";
                    }
                    //Here add the checked property in your if condition
                    if (yesPrice.checked != true && noPrice.checked != true) {
                        document.getElementById("priceErr").innerHTML = "Please Select Yes or No";
                    }
                    else {
                        document.getElementById("priceErr").innerHTML = "";
                    }
                    return false;
                }
            </script>

    Demo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 27, 2017 11:30 PM
  • User-707554951 posted

    Hi plazzasele,

    As a2h suggest, you should get the value of checked property for radioButton first,

    Then to checked it in if statement.

    The getElementById() method returns the element, so, it always not equal to true. "yesPrice!= true"  "noPrice != true" return true. The following code will always be executed  

    document.getElementById("recomendErr").innerHTML = "Please Select Yes or No";

    Working code as below:

      <script type="text/javascript">
                    function Validate() {
                        var yesRec = document.getElementById("rbtnRecomendYes");
                        var noRec = document.getElementById("rbtnRecomendNo");
                        var yesPrice = document.getElementById("rbtnPriceYes").checked;
                        var noPrice = document.getElementById("rbtnPriceNo").checked;
                        if (yesRec.checked != true && noRec.checked != true) {
                            document.getElementById("recomendErr").innerHTML = "Please Select Yes or No";
                          
                        }
                        else {
                            document.getElementById("recomendErr").innerHTML = "";
                       
                        }
                        if (yesPrice!= true && noPrice!= true) {
                            document.getElementById("priceErr").innerHTML = "Please Select Yes or No";
                     
                        }
                        else {
                            document.getElementById("priceErr").innerHTML = "";
    
                        }
                        return false;
                    }
                </script>

    Output:

    Best regards 

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 28, 2017 2:37 AM
  • User-243787542 posted

    @a2h , @Cathy Zou

    Thank you very much for your help.

    Now I see that I have missed the .Checked condition on the second if statement.

    Thursday, December 28, 2017 6:03 AM
  • User-48042309 posted

    Helpful and knowledgeful sharing about radio button validation.

    Saturday, December 30, 2017 10:00 AM