CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user5620472
user5620472

Reputation: 2882

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 to validate ruling-value field when button onClick method is getting called. If field is empty, I want show tool-tip or message about it. How can I do it?

Upvotes: 1

Views: 34

Answers (2)

prasanth
prasanth

Reputation: 22500

Simple add if() its validate both null and empty .I was updated my answer with bootstrap alert box

updated with 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> 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>

Upvotes: 1

Bharat
Bharat

Reputation: 2464

You can try like this, You have to validate your values like its not null and not empty

$(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>

Upvotes: 0

Related Questions