如何禁用多部分表单上的下一个按钮？答案

【问题标题】：How to disable next button on multipart form?如何禁用多部分表单上的下一个按钮？
【发布时间】：2014-08-28 16:52:03
【问题描述】：

所以我有一个正在处理的多部分表单，我想检查每个步骤的值并对该步骤中的输入字段运行一些基本验证。如果验证失败，我似乎无法弄清楚如何防止表单进入下一步。有谁知道如何做到这一点？

<body>
  <form name="form1" action="test.php" method="POST">
    <div id="page1" data-role="page">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Page1</h1>
      </div>
      <div data-role="content">
        <fieldset data-role="controlgroup" id="group1">
          <input type="text" name="name" id="name" />
          <label for="name">Name</label>
          <input type="text" name="age" id="age" />
          <label for="age">age</label>
        </fieldset>
        <a href="#page2" data-role="button" id="btnPage2">Next</a>
      </div>
    </div>
    <div id="page2" data-role="page">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Page2</h1>
        <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
      </div>
      <div data-role="content">
        <fieldset data-role="controlgroup" id="group2">
          <input type="text" name="address" id="address" />

【问题讨论】：

标签： javascript jquery forms validation multipartform-data

【解决方案1】：

为了防止在按钮单击时提交表单无效，您需要将 false 返回到单击事件。这里是my JSFiddle

    $("#btnPage2").click(function() {
        var isValid = true;//added local variable to track validation
        $("#group1 input[type=text]").each(function() {
            if((this.value) == "") {
                isValid = false;//form was not valid
                return false;
            }
        });  
        if (! isValid) {//when form is not valid, return false
            return false;
        }
    });

根据要求，当我想将事件绑定到所有 btnPage 按钮时，我会这样做。它检索按钮所在的组号（在这种情况下，btnPage 末尾的数字减 1 是组号）并在每个语句中使用它进行验证。 Fiddle Here

$('a[id^="btnPage"]').click(function() {
    var groupNum = +($(this).attr('id').replace('btnPage', '')) - 1;//get the group number to validate
    var isValid = true;//added local variable to track validation
    $('#group' + groupNum + ' input[type=text]').each(function() {
        if(this.value == "") {
            isValid = false;//form was not valid
            return false;
        }
    });  
    if (! isValid) {//when form is not valid, return false
        return false;
    }
});

【讨论】：

那么您知道如何使用可以传入标识符的代码编写函数，即#btnPage2/#group1、#btnPage3/#group2...。我打算在多个页面上使用它为了减少重复代码，我认为这对于一个函数来说是完美的......只是不太确定如何编写一个。
那么一个函数将为所有 btnPage# 点击事件处理这个事件？
正式成为神！！谢谢！
不客气。目前我正在开发自己的移动设备，所以我处于这种心态。
喜欢它...只是好奇，虽然我从未见过像 'a[id^="btnPage"]' 这样的选择器 .... ^ 在您的代码中做了什么？