多部分jQuery验证

Question

我正在尝试单独验证表单的不同部分。不幸的是，该表单是由CMS生成的，因此我的操作受到限制。

我尝试创建一个validate对象数组，使用当前表单部分作为索引。例如：

  //initialize validation
  validators = [
    $('#donation_amount').validate({ rules:{ amount: { required: true } } }),
    $('#personal_information').validate({ rules:{ Street: { required: true } } })
   ];

并通过以下方式切换各个部分：

  $('#btn-next').click(function() {
    //if validation is true, show next page
    if (validators[curOrder].valid()) {
      var old = $('.active');
      var oldOrder = old.attr('data-order');
      var newOrder = parseInt(oldOrder) + 1;
      old.removeClass('active');
      $("[data-order='" + newOrder + "']").addClass('active');
      curOrder = newOrder;
    }else{
      console.log("invalid");
   }
});

然而，验证总是返回true。

以下是相关页面：https://salsa3.salsalabs.com/o/50388/p/salsa/donation/common/public/?donate_page_KEY=8461

- Asherlc

---

不应该将 .validate() 放在 click 处理程序中。它的作用是初始化表单，应该放在 document.ready 中。当您需要在事件中测试表单时，请使用 .valid()，它将返回 true/false。否则，.validate() 中已经内置了可以使用的事件。请参见：这个，这个 和 这个。 - Sparky

抱歉，让我重新表达一下。所以，在每个步骤中，我只想验证显示的字段。因此，如果我有一个综合性的规则块，即使用户还没有必须访问那些字段，它也会返回无效结果，对吗？ - Asherlc

那么我的之前的评论依旧适用。每个部分都是自己的“表单”，您可以单独验证它们。否则，您将处理一些非常不必要的复杂性。 - Sparky

看起来是这样的。我可以假设初始化在document.ready里面吗？如果每个部分现在都包含在自己的“表单”中，那么为什么还要混乱地使用“.active”类和诸如此类的东西呢？ - Sparky

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/17151/discussion-between-asherlc-and-sparky672 - Asherlc

Answer 1

为什么你在自己写一点 JavaScript 的时候还要使用 .validate 插件呢？只需要在点击事件中检查输入框的值（例如 $('#myInput').val().trim() == ""），并针对每个输入框显示/隐藏相应的错误提示即可。

此外，对于多部分验证，只需验证必填字段并继续进行下一步操作即可。

$('#btn-next').click(function() {
var amountValid = $('#donation_amount').val().trim() == '' ? false : true;
var infoValid = $('#personal_information').val().trim() == '' ? false : true;

if (amountValid && infoValid) {
  var old = $('.active');
  var oldOrder = old.attr('data-order');
  var newOrder = parseInt(oldOrder) + 1;
  old.removeClass('active');
  $("[data-order='" + newOrder + "']").addClass('active');
      curOrder = newOrder;
    }else{
      console.log("invalid");
    }
});

- Taha Rehman Siddiqui

---

我将会检查电子邮件地址、数字格式等的有效性。还需要添加无效标签和类。如果我放弃验证插件，所有这些似乎都需要重新发明轮子，并且以一些相当繁琐的方式实现。 - Asherlc