Question

我有一个多步形式，使用jquery.validate进行验证。验证工作正常，但用户可以继续执行第2步，即使第1部分未验证客户端。下一个按钮不是提交按钮，它只是取消隐藏step2。我需要在每个步骤中禁用下一个按钮，直到该步骤中的所有字段验证客户端。表格直到最后一步才提交。任何帮助将不胜感激。

这是我的.js

$("#form1").validate({
    onfocusout : function(element) {
        $(element).valid();
    }
})

html的

<fieldset id="step1" style="display:block;">
        <label>Unit #</label>
        <input type="text" id="unit" name="unit" placeholder="Unit" class="required"/>
        <label for="unit" class="error"></label>

            etc........

        <button type="button" onclick="changeTab(2);">
            Next
        </button>

</fieldset>
<fieldset id="step2" style="display: none;"> etc.......

Answer 1

首先给你的按钮一个像这样的id或类：

<button type="button" onclick="changeTab(2);" id="some-btn">
    Next
</button>

首次加载页面时执行此操作：

$("#some-btn" ).buttonMarkup( "disable" );

一旦页面可用，这将禁用按钮，当验证成功时，只需启用它：

$("#some-btn" ).buttonMarkup( "enable" );

在官方文档中了解更多相关信息：http://api.jquerymobile.com/button/#method-disable。

还有一件事，一些jQuery Mobile按钮类型只能通过自定义javascript禁用，请阅读更多相关信息 here 。

以多步形式禁用下一个按钮，直到字段验证

1 个答案: