Select Cascading dropdown validation using jquery

Question

I have HTML Table in form with cascading dropdown based on parent value i need some validation in cascading dropdown how can i achieve that ?

HTML Code :

 <html>
    <head>
     <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
     <script>
        $(function() {
          $(".tr_weekly").hide();
          $(".tr_monthly").hide();
       });

       function schedule(value){
        if(value == 2){
           $(".tr_weekly").show();
           $(".tr_monthly").hide();
           return false;
        }else if(value == 3){
           $(".tr_weekly").hide();
           $(".tr_monthly").show();
           return false;
        }else{
           $(".tr_weekly").hide();
           $(".tr_monthly").hide();
           return false;
        }
    }

    function validation (){
      if($(".weekly").exists()){
          var weekly_schedular= $( "#weekly option:selected" ).text();
          alert("Weekly Dropdown enable with value "+weekly_schedular);
      }
      if($(".monthly").exists()){
          var monthly_schedular= $( "#monthly option:selected" ).text();
          alert("Monthly Dropdown enable with value "+monthly_schedular);
       }
   }
    </script>
    </head>
    <body>
      <form id="form1" name="form1" method="post" onsubmit="return validation()" >
    <table>
            <tr>
                <td>Schdule By </td>
                <td>
                    <select id="duration" class="selectionBox" onchange="schedule(this.value);" name="duration">
                        <option value="">select</option>
                        <option value="1">Daily</option>
                        <option value="2">Weekly</option>
                        <option value="3">Monthly</option>
                     </select>
                </td>
           </tr>
           <tr class='tr_weekly'>
             <td>Weekly</td>
             <td>
                  <select id="weekly" name="day" class ='weekly'>
                        <option value="">select</option>
                        <option value="1">Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                        <option value="7">Sunday</option>
                  </select>
                </td>
            </tr>
           <tr class='tr_monthly'>
             <td>Monthly</td>
             <td>
                  <select id="monthly" name="day" class ='monthly'>
                       <option value="">select</option>
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                       <option value="6">6</option>
                       <option value="7">7</option>
                       <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
                      <option value="16">16</option>
                      <option value="17">17</option>
                      <option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
                      <option value="21">21</option>
                      <option value="22">22</option>
                      <option value="23">23</option>
                      <option value="24">24</option>
                      <option value="25">25</option>
                      <option value="26">26</option>
                      <option value="27">27</option>
                      <option value="28">28</option>
                  </select>
                </td>
            </tr>
    </table>
    </form>
    </body>
    </html>

Based on Schedule dropdown value Another select dropdown(Weekly/Monthly) hide/show its working but my question is like below

Question :

If Cascading dropdown(Monthly/Weekly) is show than and than only need to execute validation on that dropdown like must need to select any value

Answer 1

Try the following code. Fiddle

$(document).ready(function() {
    $(".tr_weekly").hide();
    $(".tr_monthly").hide();

    $('#duration').change(function() {
        var value = $('#duration').val();
        if (value == 2) {
            $(".tr_weekly").show();
            $(".tr_monthly").hide();
            return false;
        } else if (value == 3) {
            $(".tr_weekly").hide();
            $(".tr_monthly").show();
            return false;
        } else {
            $(".tr_weekly").hide();
            $(".tr_monthly").hide();
        }
    });
});

Update: For form validation validate when you click the submit button.

$('#submit').click(function(){
    var value = $('#duration').val();
    var month = $('#monthly').val();

    if(value == 3 && month == ""){
        alert("Please select Monthly value");
    }

});

Answer 2

try this:

function validation (){
  if($(".tr_weekly").is(':visible')){
      var weekly_schedular= $( "#weekly option:selected" ).text();
      alert("Weekly Dropdown enable with value "+weekly_schedular);
      if (weekly_schedular == "select") {
          return false; //if false not working, try event.preventDefault();
       }
  }
  if($(".tr_monthly").is(':visible')){
      var monthly_schedular= $( "#monthly option:selected" ).text();
      alert("Monthly Dropdown enable with value "+monthly_schedular);
      if (monthly_schedular == "select") {
          return false;
       }
   }
    retutn true;
 }

Select Cascading dropdown validation using jquery

Question

2 answers

solution1
1 ACCPTED 2015-06-26 08:19:21

solution2
0 2015-06-26 08:41:42

Select Cascading dropdown validation using jquery

Question

2 answers

solution1 1 ACCPTED 2015-06-26 08:19:21

solution2 0 2015-06-26 08:41:42

solution1
1 ACCPTED 2015-06-26 08:19:21

solution2
0 2015-06-26 08:41:42