Add border to Textarea / Input when its empty - html

Question

I have bootstrap modal, and i want add red border to textarea when notes is empty..
Modal :
div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="form-group has-error">
<label class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
<div style="margin-left: 5%;margin-right: 5%;">
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn btn-ok pull-right" ">Reject</button>
<button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
and my Javascript :
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
var notes = $("#NOTES_REJECT_SV").val();
// alert(NOTES);
console.log('notes',notes)
if(notes){
$('#NOTES_REJECT_SV').css('border-color', 'red'); // < not working
$('#modal_reject').modal('hide')
return false;
}

Answer 1

You can simply use .css to apply border border, 1px solid red if notes are empty and remove border as well once there is a value.
I have simplified your code as well.
Run snippet below to see it working.
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
//Get the target input
var notesInput = $("#NOTES_REJECT_SV");
//Check value
if (notesInput.val()) {
//Hide Modal
$('#modal_reject').modal('hide')
//Remove border
$(notesInput).css('border', '1px solid #ced4da'); //Remove border
} else {
//Apply Border
$(notesInput).css('border', '1px solid red'); //Apply border
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group has-error">
<label class="control-label"> Add Note <span class="text-danger">*</span></label>
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer 2

Or you can bind an event to 'keyup' event then it will check every character entered or deleted.
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
var notes = $("#NOTES_REJECT_SV").val();
// alert(NOTES);
console.log('notes',notes)
if(notes){
$('#NOTES_REJECT_SV').css('border-color', 'red'); // < not working
$('#modal_reject').modal('hide')
}
return false;
});
$("#NOTES_REJECT_SV").on("keyup", function() {
if($(this).val().length == 0) {
$(this).addClass("redborder")
} else {
$(this).removeClass("redborder")
}
})
.redborder {
border: 2px solid red;
}
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div class="form-group has-error">
<label class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
<div style="margin-left: 5%;margin-right: 5%;">
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control redborder" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn btn-ok pull-right" >Reject</button>
<button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
</div>

Answer 3

you need to call event directly on submit. i added this thing on jsFiddle you can check it here.

Answer 4

you should change your condition, try this :
if(!notes){//<==
$('#NOTES_REJECT_SV').css('border-color', 'red');
$('#modal_reject').modal('hide')
return false;
}