JSFiddle - React, Tailwind, and code Playground

by devanghingu

HTML

<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" data-dismiss="modal">Reject</button>
     <button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
  </div>
</div>

JavaScript

$('#submit').on('click',function(){
 //validation 
 	if($('#NOTES_REJECT_SV').val().length == 0) //when value is null
  {
  	$('#NOTES_REJECT_SV').css('border', '1px solid #f00');
  	//you can append message also here.
  }
});

$('#NOTES_REJECT_SV').on('focus', function(){
  	$('#NOTES_REJECT_SV').css('border', '1px solid gray');
});