how to validate a field in tab? - validation

Question

I need that the customer field is required, if it is empty when pressing the continue button, this not must allow continue to next step and it then should appear a message indicating that the field is empty and need be completed.
Please, i need a help or advice about how to could make the validation.
Using boostrap.
<ul class="nav nav-pills nav-justified" id="NotTab">
<li class="active disabledTab">1. <?php echo $tab_customer; ?></li>
<li class="disabled disabledTab">2. <?php echo $tab_payment; ?></li>
</ul>
<div id="tab-customer" class="tab-pane active">
<div class="control-group">
<label class="control-label" style="color: #F00;"><b><?php echo $entry_customer; ?></b></label>
<div class="controls">
<input type="text" name="customer" value="<?php echo $customer; ?>" class="span3" onclick="this.select();">
<input type="hidden" name="customer_id" value="<?php echo $customer_id; ?>">
<input type="hidden" name="customer_group_id" value="<?php echo $customer_group_id; ?>">
</div></div>
<div class="form-actions">
<button class="btn btn-primary prevtab" type="button" onclick="return showNext()"><span class="glyphicon glyphicon-arrow-right"></span> Next </button></div>
</div>
<script>
var $tabs = $('#NotTab li');
function showPrev() {
$tabs.filter('.active').prev('li').removeClass("disabled");
$tabs.filter('.active').prev('li').find('a[data-toggle]').each(function () {
$(this).attr("data-toggle", "tab");
});
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').each(function () {
$(this).attr("data-toggle", "").parent('li').addClass("disabled");
})
}
function showNext() {
$tabs.filter('.active').next('li').removeClass("disabled");
$tabs.filter('.active').next('li').find('a[data-toggle]').each(function () {
$(this).attr("data-toggle", "tab");
});
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').each(function () {
$(this).attr("data-toggle", "").parent('li').addClass("disabled");;
})
}
</script>
Thanks.

Answer 1

You can use a simple check, to check if the input is empty.
if( !$('[name=customer]').val() ) {
alert('Input is empty');
return;
}