Как проверить поле ввода в функции jquery?

Question

У меня есть поле ввода, не в форме

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

и кнопки

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

и

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

Я хочу, чтобы проверить ruling-value поле при нажатии кнопки метод OnClick становится называется. Если поле пустое, я хочу показать подсказку или сообщение об этом. Как мне это сделать?

Answer 1

Простой надстройкой if() его Validate как null и empty .Я был обновлен мой ответ с ботстрапом поле для предупреждения

обновлено с bootstr ар

$('#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> This alert box could indicate a warning that might need attention. 
 
    </div> 
 
<div class="alert alert-success"> 
 
    <strong>Success!</strong> This alert box could indicate a successful or positive action. 
 
    </div>

Answer 2

Вы можете попробовать, как это, Вы должны подтвердить свой values как его не нулевой, а не пустой

$(document).ready(function(){ 
 
    $('#addButton').click(function() { 
 
     var values = $("#ruling-value").val().split(','); 
 
     if(values != '' && values != null) 
 
     { 
 
      //Your code 
 
     }else{ 
 
      alert("Required") 
 
      return false; 
 
     } 
 
    }); 
 
});

<input type="text" class="form-control" id="ruling-value" required> 
 
<button id="addButton" type="button" class="btn btn-primary">add</button> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>