Color of select fields in class "Form" do not change to red when its clicked and left as it is without selecting the option. it should check if the option has value other than 1 and border should remain as it is.

$(".Wrapper .Right_Section .Form select").on('blur',function(){ 
  if( $(this, 'option:selected').val() == 0 ){
    $(this).css('border-color', '1px solid #C80000');    
  }
  else if ($(this).val() > 0) {
    $(this).css('border-color', '1px solid #BDC7BC');   
  } 
});

Here .Wrapper .Right_Section .Form are divs are within each other and select tag is in .Form div.

Color of select fields in class "Form" do not change to red when its clicked and left as it is without selecting the option. it should check if the option has value other than 1 and border should remain as it is.

$(".Wrapper .Right_Section .Form select").on('blur',function(){ 
  if( $(this, 'option:selected').val() == 0 ){
    $(this).css('border-color', '1px solid #C80000');    
  }
  else if ($(this).val() > 0) {
    $(this).css('border-color', '1px solid #BDC7BC');   
  } 
});

Here .Wrapper .Right_Section .Form are divs are within each other and select tag is in .Form div.

• javascript
• jquery
• html

• Change border-color to border, or remove the 1px solid portion from your style. – Tyler Roper Commented Feb 17, 2017 at 14:22
• well that is causing the border to vanish all together – Faran52 Commented Feb 17, 2017 at 14:30

4 Answers 4

Please check this. Remove border-color and add border because you are specifying all border properties.

$(document).ready(function(){
  $("select").blur(function(){
    //alert($(this).val());
    if(parseInt($(this).val())<=0){
      $(this).css("border","solid 1px red");
    }
    else{
      $(this).css("border","solid 1px blue");
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

Your code has two problem.

1. In jQuery(selector [, context ]), first parameter is selector and second is context.

2. You should write color string in second parameter of .css().

$(".Wrapper .Right_Section .Form select").on('blur',function(){ 
  if ( $('option:selected', this).val() == 0 ){
    $(this).css('border-color', '#C80000');     
  }
  else if ($(this).val() > 0) {
    $(this).css('border-color', '#BDC7BC');    
  }
});

$("select").on('blur',function(){ 
  if ($('option:selected', this).val() == 0)
    $(this).css('border-color', '#C80000');     
  else if ($(this).val() > 0)
    $(this).css('border-color', '#BDC7BC');   
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

You have to check on $(this).val() != "" this is the first thing, secondly you have to adapt your selector $(".Wrapper .Right_Section .Form select") maybe can use something like $("form select") ... Otherwise I suggest to a class required on css with .required-error{border : Apx solid #C80000;} then you may use $(this).addClass('required-error'); or $(this).removeClass('required-error');

$("select").on('blur',function(){ 
  if ($('option:selected', this).val() == 0)
    $(this).css('border-color', '#C80000');     
  else if ($(this).val() > 0)
    $(this).css('border-color', '#BDC7BC');   
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>