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

我有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;
    }

最佳答案

您可以直接在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属性更干净。