Question

我的HTML有5个标签，底部有表单字段和按钮，可以导航到下一个标签。如果单击“下一步”按钮验证失败，我想防止制表符切换。目前，当验证失败时，tab切换到下一个选项卡。我已经单独尝试了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();

使用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 togglable tabs

哈希标记链接（href="#foo"）不会触发页面刷新，因此e.preventDefault等在此处无用。通常的做法是使用带有jQuery或javascript的哈希标记链接，正是出于这个原因。

当验证失败时，如何防止锚标记在javascript中重定向

3 个答案: