unable to add border color to input on click event

Question

Trying to change the border color on an onClick event.

If a particular radio button, such as 'Other' is checked, and the user tries to save, I wanted to change the border color to red to let the user know they must enter a value in the input.

$('#nextsales3Btn').on('click', function() {
  var ratestructure = $('input[name="ratestructure"]:checked').val();  // radio button
  var otherstructure = $('#otherratein').val();

  if(ratestructure == "Other" && otherstructure == "")
  {
    $('#otherratein').css('border', 'red');
    console.log('here');
    return false;
  }
  else
  {
    console.log('all good');
  }
});

The above logic works. I can see 'here' in the console when the radio button is checked and the input is empty, but I cannot seem to change the border color of the input.

I tried to use the following to no avail:

$('#otherratein').css('border-color', 'red');

No success there.

How can I make this work?

* EDIT *

Here is how the HTML looks:

   <div class="form-row">
     <div class="col-md-12">
        <div class="form-group"> 
           <label id="ratestructureLabel">Required Rate Structure:</label>                                     
           <br/> 
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="allin" value="all-in"> 
           <label class="form-check-label" for="yesebiz">All-In</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="allindest" value="all-inD"> 
           <label class="form-check-label" for="allindest">All-In, subject to Destinations</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="allinori" value="all-inO"> 
           <label class="form-check-label" for="allinori">All-In, subject to Origins</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="boforindest" value="bofOD"> 
           <label class="form-check-label" for="boforindest">BOF, subject to Origins & Destination</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="pernote2" value="pernote2"> 
           <label class="form-check-label" for="pernote2">Per Note 2</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="surcharges" value="surcharges"> 
           <label class="form-check-label" for="surcharges">Surcharges per tariff</label>                                         
           </div>
           <div class="form-check form-check-inline"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="otherrate" value="Other Rate"> 
           <label class="form-check-label" for="otherrate">Other:</label>
           <input type="text" class="form-control ml-2" name="otherstructure" id="otherrateIn" placeholder=""> 
           </div>
         </div>
       </div>
     </div>

Answer 1

First of all,

Definition and Usage The border property is a shorthand property for:

border-width border-style (required) border-color

so:

 border: 5px solid red;

at javascript:

$('#otherrate').css('border', '5px solid red');

Answer 2

Only applying a color can get no results at all. You can try applying the following:

$('#otherrate').css('border', '1px solid red')

Even though I highly recommend applying as CSS instead.

Answer 3

border-color and border are not same.

$('#otherrate').css('border-color', 'red'); should work.

 $('#otherrate').css('border-color', 'red');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="otherrate"/>

In case of border property color name should be use with border-width and border-style property:

 $('#otherrate').css('border', '1px solid red');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="otherrate"/>

Answer 4

You have to use || instead of && because if any one of the condition is true you want to show border .Also , i have given class to your div which have Others radio-button inside it to give border to whole div. ie :

 $('#nextsales3Btn').on('click', function() { var ratestructure = $('input[name="ratestructure"]:checked').val(); // radio button var otherstructure = $('#otherrate').val(); if(ratestructure == "Other Rate" || otherstructure == "") { $('.otherrate').css('border', '1px solid red'); console.log('here'); return false; } else { //removing border $('.otherrate').css('border', ''); console.log('all good'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="form-row"> <div class="col-md-12"> <div class="form-group"> <label id="ratestructureLabel">Required Rate Structure:</label> <br/> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="allin" value="all-in"> <label class="form-check-label" for="yesebiz">All-In</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="allindest" value="all-inD"> <label class="form-check-label" for="allindest">All-In, subject to Destinations</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="allinori" value="all-inO"> <label class="form-check-label" for="allinori">All-In, subject to Origins</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="boforindest" value="bofOD"> <label class="form-check-label" for="boforindest">BOF, subject to Origins & Destination</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="pernote2" value="pernote2"> <label class="form-check-label" for="pernote2">Per Note 2</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="surcharges" value="surcharges"> <label class="form-check-label" for="surcharges">Surcharges per tariff</label> </div> <div class="form-check form-check-inline otherrate"> <input class="form-check-input" type="radio" name="ratestructure" id="otherrate" value="Other Rate"> <label class="form-check-label" for="otherrate">Other:</label> <input type="text" class="form-control ml-2" name="otherstructure" id="otherrateIn" placeholder=""> </div> </div> </div> </div> <button id="nextsales3Btn">Check</button>

Answer 5

I went into the HTML and added a class to the actual input. Then referenced that class in the jQuery and I was able to change the border of the input.