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;
    }
});

为了尝试克服这一点，我在下一个按钮中添加了一个名为next button的类，然后尝试更改此行，我假设检查任何输入：

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

为：

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

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

我怎样才能做到这一点只有向前运动才有效？

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

Answer 1

我想仅在点击下一个按钮时验证，而不是单击上一个按钮。 ....我怎样才能做到这一点，只有向前运动才有效？

只需在“上一页”按钮上添加cancel课程即可。当提交按钮包含cancel类时，将自动忽略所有验证规则。但是，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"按钮，则需要编写相应的点击处理程序，并仅在“下一步”按钮处理程序上检查表单的有效性。使用.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; } });

DEMO：http://jsfiddle.net/553xmzh3/3/

jQuery选项卡并验证

1 个答案: