Need to change the style if selectbox is not selected

Question

My mined is confused about the selectbox changing style after button click if selectbox is not selected.

Where i am doing wrong change anyone help me here. My code example is here.

After clicking the send button the jquery code should work if selectbox is not selected. But it is working just for one selectbox. What i am doing wrong here.

HTML

<div class="container">
<select style="" name="birth_day" id="subscription_day">
 <option value="">Day</option> 
 <option value="1">  01 </option> 
 <option value="2">  02 </option> 
 <option value="3">  03 </option> 
 <option value="4">  04 </option> 
 <option value="5">  05 </option> 
</select>

<!---->
<select style="" name="birth_month" id="subscription_month">
<option value="">Day</option>
 <option value="1">  01 </option>
 <option value="2">  02 </option>
 <option value="3">  03 </option>
 <option value="4">  04 </option>
 <option value="5">  05 </option>
</select> 
<div class="send">Send</div>
</div>

and JS Code

$(document).ready(function() {
  $("body").on("click", ".send", function() {
    var birthday = $("select[name^='birth_day']");
    var birthmonth = $("select[name^='birth_month']");
    if (!birthday.prop("option:selected")) {
      // Check if birthday selected
      birthday.focus().css({
        border: "2px solid rgba(255, 0, 0, 0.6)",
        background: "rgba(255, 0, 0,.05)",
        transition: "all 0.15s ease-out;"
      });
      return false;
    }
    if (!birthmonth.prop("option:selected")) {
      // Check if birthmonth selected
      birthmonth.focus().css({
        border: "2px solid rgba(255, 0, 0, 0.6)",
        background: "rgba(255, 0, 0,.05)",
        transition: "all 0.15s ease-out;"
      });
      return false;
    }
  });
});

The DEMO is here also.

Answer 1

What you can do to apply your code to all your selects is to loop through each of those. This will also eliminate your code duplication.

$(document).ready(function() {
  $("body").on("click", ".send", function() {
    var validated = true;

    // choose an appropriate selector to select only the selects you need
    $( 'select' ).each( function() {
      // all selects you are looping through will be referred as this
      if ( $( this ).find( 'option:selected').val() === '' ) {
        validated = false;

        $( this ).focus().css({
          border: "2px solid rgba(255, 0, 0, 0.6)",
          background: "rgba(255, 0, 0,.05)",
          transition: "all 0.15s ease-out;"
        });
      }
    } );

    // preventing default behavior if a field is empty
    return validated;
  });
});

See a working pen here

Answer 2

Just omit the return statement in the two if blocks .

Answer 3

Please try below code.

$(document).ready(function() {
  $(".send").on("click", function() {
    var selected = true;
    var birthday = $("#subscription_day");
    var birthmonth = $("#subscription_month");
    //console.log(birthday+'=>'+birthmonth);
    if (!birthday.val()) {
      // Check if birthday is selected
      birthday.focus().css({
        border: "2px solid rgba(255, 0, 0, 0.6)",
        background: "rgba(255, 0, 0,.05)",
        transition: "all 0.15s ease-out;"
      });
      selected = false;
    }
    if (!birthmonth.val()) {
      // Check if birthmonth is selected
      birthmonth.focus().css({
        border: "2px solid rgba(255, 0, 0, 0.6)",
        background: "rgba(255, 0, 0,.05)",
        transition: "all 0.15s ease-out;"
      });
      selected = false;
    }
    return selected;
  });
});

Answer 4

This happens because you are returning from the function (if the first select is not selected) before checking the value of second select.

var selected = true; // use a variable to check selection

// .val() checks if the select is selected or not
if (!birthday.val()) { 

  // ...      
  selected = false;
}

// .val() checks if the select is selected or not
if (!birthmonth.val()) {

  // ...
  selected = false;
}

return selected; // return the variable

Here is your desired result;