驗證失敗時，如何防止錨標記在javascript中重定向

Question

我有5個標簽的HTML，其中的表單字段和底部的按鈕可導航到下一個標簽。 如果單擊“下一步”按鈕后驗證失敗，我想防止選項卡切換。 當前，當驗證失敗時，選項卡切換到下一個選項卡。 我已經嘗試了event.preventDefault()和分別return false並組合在一起，但是這些都不在chrome瀏覽器中工作。 任何的意見都將會有幫助。

<div class="row">
    <ul class="nav nav-pills">
        <li class="active" id="libdet">
            <a data-toggle="tab" href="#bdetails">1. Service Basic details</a>
        </li>
        <li>
            <a data-toggle="tab" href="#soptions">2. Service Options</a>
        </li>
        <li>
            <a data-toggle="tab" href="#addInfor">3. Service Add. info</a>
        </li>    
        <li>
            <a data-toggle="tab" href="#addImgs">4. Images</a>
        </li>
        <li>
            <a data-toggle="tab" href="#tandc">5. Terms &amp; Conditions</a
        </li>
    </ul>
</div>
<div class="col-xs-4">
    <a data-toggle="tab" href="#soptions">
        <button name="next" id="nextSB" onclick="validatefirsttab()">NEXT</button>
    </a>
</div>

function validatefirsttab() {
    if (document.form.productTitle.value == "") {
        alert("Please provide Service title!");
        document.form.productTitle.focus();
        event.preventDefault();
        return false;
    }

Answer 1

您可以直接在jQuery中使用click函數。 您的按鈕具有可以使用的ID，因此：

$("#nextSB").click(function(e){
    if (document.form.productTitle.value == "") {
        alert("Please provide Service title!");
        document.form.productTitle.focus();
        e.preventDefault();
        return false;
    }
}

然后您的按鈕將是：

<button name="next" id="nextSB">NEXT</button>

我認為，此解決方案比使用onclick屬性更干凈。

Answer 2

感謝大伙們！ 我找到了答案。

這是修改后的代碼：

• 在函數中添加了事件作為參數。
• 還有1個對event.stopImmediatePropagation();調用event.stopImmediatePropagation();

Javascript：

function validatefirsttab(event)
      {

         if( document.form.productTitle.value == "" )
         {
            alert( "Please provide Service title!" );
            document.form.productTitle.focus() ;
            event.preventDefault();
            event.stopImmediatePropagation(); // Added now
         }
       }

HTML：

<a data-toggle="tab" href="#soptions">
  <button name="next" id="nextSB" onclick="return validatefirsttab(event);" >NEXT
  </button>
</a>

Answer 3

您正在使用Bootstrap.js嗎？ 可能是另一個jQuery偵聽器觸發了選項卡的更改。

在這種情況下，您需要刪除<a data-toggle="tab" href="#soptions"> （這會觸發選項卡開關），並為“下一步”按鈕創建一個新的jQuery偵聽器。 您可以將您的validatefirsttab()函數放在引導選項卡函數內：

<div class="row">
<ul class="nav nav-pills">
    <li class="active" id="libdet">
        <a data-toggle="tab" href="#bdetails">1. Service Basic details</a>
    </li>
    <li>
        <a data-toggle="tab" href="#soptions">2. Service Options</a>
    </li>
    <li>
        <a data-toggle="tab" href="#addInfor">3. Service Add. info</a>
    </li>    
    <li>
        <a data-toggle="tab" href="#addImgs">4. Images</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tandc">5. Terms &amp; Conditions</a
    </li>
  </ul>
</div>
<div class="col-xs-4">
  <button name="next" id="nextSB">NEXT</button>
</div>

<script>
    $('#nextSB').on('click',function() {
        if (document.form.productTitle.value == "") {
            alert("Please provide Service title!");
        } else {
            $('a[href="#soptions"]').tab('show') // Select tab by name
        }
    })
</script>

未經測試，再次假設您使用的是bootstrap.js切換標簽

哈希標記鏈接（ href="#foo" ）不會觸發頁面刷新，因此e.preventDefault之類的東西在這里沒有用。 出於這個原因，通常將哈希標簽鏈接與jQuery或javascript一起使用。