多部分jQuery验证

时间:2012-09-25 20:51:10

标签: javascript jquery forms jquery-validate validation

我正在尝试分别验证表单的不同部分。不幸的是,表单是由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

1 个答案:

答案 0 :(得分:1)

为什么在自己编写一些小javascript时甚至使用.validate插件。单击时,只需检查输入的值(如$('#myInput')。val()。trim()==“”)并显示/隐藏每个输入的相应错误div。

此外,对于多部分验证,仅验证必填字段并继续应该进行的操作。

$('#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");
    }
});