Is there a way to change the border color of an input field on an onClick event?
In my scenario, if the 'Other' radio button is selected and a user attempts to save without entering any value in the input field, I want the border color of the input field to turn red to indicate that a value is required.
$('#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 logic above works as expected. The console displays 'here' when the radio button is checked and the input is empty. However, changing the border color of the input field does not seem to work.
I have tried the following without success:
$('#otherratein').css('border-color', 'red');
Unfortunately, this did not produce the desired outcome.
Any guidance on how to resolve this issue would be greatly appreciated?
* EDIT *
Here is an example of how the relevant HTML code 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>