javascript - How validate input field in jquery function? -

i have input field not in form

<input type="text" class="form-control" id="ruling-value" required> 

and button

<button id="addbutton" type="button" class="btn btn-primary">add</button> 

and

$('#addbutton').click(function () {         var values = $("#ruling-value").val().split(',');         //some code         }     }); 

i want validate ruling-value field when button onclick method getting called. if field empty, want show tool-tip or message it. how can it?

simple add if() validate both null , empty .i updated answer bootstrap alert box

updated bootstrap

$('#addbutton').click(function () {      $(".alert").hide()         if($("#ruling-value").val())           {       $(".alert-success").show()          }    else{$(".alert-warning").show()}      });

.alert{display:none}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" class="form-control" id="ruling-value" required>      <button id="addbutton" type="button" class="btn btn-primary">add</button>   <div class="alert alert-warning">      <strong>warning!</strong> alert box indicate warning might need attention.    </div>  <div class="alert alert-success">      <strong>success!</strong> alert box indicate successful or positive action.    </div>