jQuery 个选项卡并验证

Question

我正在使用 jQuery 选项卡，并在允许用户移至下一个选项卡之前验证所有字段是否已填写。在一些选项卡上有选项，用户可以从多个选项中进行选择，有时，用户会单击选项 1 并表示选项 2，但是当他们尝试单击上一个按钮时，这会验证字段并且不会让他们直到他们填写了垃圾用户体验的所有字段。

我只想在单击下一步按钮时进行验证，而不是在单击上一个按钮时进行验证。

<a class="btn nexttab navbutton" href="#step1">Previous</a>
<a class="btn nexttab navbutton" href="#step3">Next</a>

这是我目前使用的代码：

var validator = $("#start").validate();

var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        $(panelId).find(":input").each(function() {
            console.log(valid);
            if (!validator.element(this) && valid) {
                valid = false;
            }
        });

        return valid;
    }
});

为了尝试克服这个问题，我添加了一个名为 class 的下一个按钮，仅添加到下一个按钮，然后尝试更改这一行，我假设它检查任何输入：

$(panelId).find(":input").each(function() {

至：

$(".nextbutton").click(function() {

但它允许用户移动到下一个屏幕而无需填写所有字段。

我怎样才能让它只验证向前移动？

http://jsfiddle.net/553xmzh3/1/

Answer 1

I would like to only validate on clicking a next button but not on clicking a previous button. .... How can I make it so only forward movement is validated?

只需在 "previous" 按钮上放置 cancel class。当提交按钮包含 cancel class 时，将自动忽略所有验证规则。但是，submitHandler 会像表单有效一样触发。

<input type="submit" value="PREVIOUS" class="cancel" /><!--// This submit will not trigger validation //-->

<input type="submit" value="NEXT" /><!--// This submit will trigger validation //-->

工作演示：http://jsfiddle.net/4zdL8ha3/

编辑：

虽然它仍然有效，using class="cancel" has been officially deprecated and replaced with formnovalidate="formnovalidate"

<input type="submit" value="PREVIOUS" formnovalidate="formnovalidate" />

工作演示：http://jsfiddle.net/4zdL8ha3/1/

由于您使用的是锚标记而不是 type="submit" 元素，因此此解决方案不适合您。最好用 button 元素替换锚标记。这样，使用 CSS，您可以设置 button 的样式，使其看起来与锚点完全相同。

<button type="submit" class="btn nexttab navbutton" formnovalidate="formnovalidate">Previous</button>
<button type="submit" class="btn nexttab navbutton">Next</button>

工作演示：http://jsfiddle.net/4zdL8ha3/2/

编辑:

如果您必须用锚标记代替 type="submit" 按钮，那么您需要编写适当的点击处理程序并仅在 "next" 按钮处理程序上检查表单的有效性。使用 .valid() 方法还可以通过 从选项卡切换器功能中删除 您的自定义验证测试器来简化您的代码。

$(".nexttab").click(function () { // NEXT BUTTON
    if ($("#start").valid()) {    // TEST VALIDATION 
        $("#tabs").tabs("select", this.hash);
    }
});

$(".cancel").click(function () {  // PREVIOUS BUTTON - NO VALIDATION TEST
    $("#tabs").tabs("select", this.hash);
});

初始化：

var validator = $("#start").validate();

var tabs = $("#tabs").tabs({
    select: function (event, ui) {
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");
        return true;
    }
});

演示：http://jsfiddle.net/553xmzh3/3/

jQuery 个选项卡并验证

jQuery tabs and validate

javascript

jquery

tabs

jquery-validate