Add border to Textarea / Input when its empty

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">&times;</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;
      
    }