如何驗證選項卡中的字段？

Question

我需要客戶字段，如果按繼續按鈕時該字段為空，則不必允許繼續進行下一步，然后應顯示一條消息，指示該字段為空且需要完成。

請，我需要有關如何進行驗證的幫助或建議。

使用boostrap。

<ul class="nav nav-pills nav-justified" id="NotTab">
<li class="active disabledTab"><a href="#tab-customer" data-toggle="tab">1. <?php echo $tab_customer; ?></a></li>
<li class="disabled disabledTab"><a href="#tab-payment" data-toggle="tab">2. <?php echo $tab_payment; ?></a></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>

謝謝。

Answer 1

您可以使用簡單的檢查來檢查輸入是否為空。

if( !$('[name=customer]').val() ) {
    alert('Input is empty');
    return;
}