Jquery.Validate - 基于哪个选项卡添加/删除规则

如何解决Jquery.Validate - 基于哪个选项卡添加/删除规则

我有一个 Bootstrap 4 选项卡式界面，每个选项卡上都有输入框。我希望允许用户根据他们所在的选项卡输入不同的必填字段，因此我希望基于该选项卡添加或删除验证。还有一些输入是强制性的，无论用户在哪个选项卡中。

我所做的是创建一个默认验证函数，该函数添加了 2 个共享输入及其规则。然后，我使用 Bootstrap 事件来捕获单击了哪个选项卡，删除了任何现有验证并为该特定选项卡创建验证。

我已经完成了 90% 的工作，但我最近注意到标签内的输入在来回切换时实际上并没有被重置。我曾尝试使用 addmethod，但根本没有让新规则发挥作用。

我的现实生活应用程序有超过 2 个标签，所以我也不能简单地在 2 组规则之间来回切换。

提琴手 here

var currTab = '#tab1';
ValidationDefaults();
Tab1Validation();


$('a[data-toggle="tab"]').on('shown.bs.tab',function(e) {
  currTab = $(e.target).attr("href"); // activated tab

  ClearValidation();
  ValidationDefaults();

});

$('#btnSubmit').on('click',function(e) {

  switch (currTab) {
    case "#tab1":

      Tab1Validation();
      break;
    case "#tab2":

      Tab2Validation();
      break;
  }

  if ($("form").valid()) {

  }
});


function Tab1Validation() {

  //https://stackoverflow.com/a/28954059/1555453
  var validator = $("#Create").validate({
    rules: {
      username: {
        require_from_group: [1,".Tab1Group"]
      },username2: {
        require_from_group: [1,".Tab1Group"]
      }
    },messages: {
      username: "* You must enter either a username or a Username 2",username2: "* You must enter either a username or a Username 2"
    }
  });

}

function Tab2Validation() {

  //https://stackoverflow.com/a/28954059/1555453
  var validator = $("#Create").validate({
    rules: {
      street: {
        required: true
      },city: {
        required: true
      }
    },messages: {
      street: "* You must enter either a street",city: "* You must enter either a city"
    }
  });

}

function ClearValidation() {
  var validator = $("#Create").validate();
  validator.resetForm();

  $('#Create').removeData('validator');
  ValidationDefaults();
}

function ValidationDefaults() {

  $.validator.setDefaults({
    rules: {
      firstname: {
        required: true
      },lastname: {
        required: true
      }
    },messages: {
      firstname: "* A first name is required",lastname: "* A last name is required"
    },errorElement: 'span',errorPlacement: function(error,element) {
      error.addClass('invalid-Feedback');
      element.closest('.form-group').append(error);
    },highlight: function(element,errorClass,validClass) {
      $(element).addClass('is-invalid');
    },unhighlight: function(element,validClass) {
      $(element).removeClass('is-invalid');
    }
  });
}

解决方法

您的尝试是错误的方法...

.validate() 方法只能被调用一次来初始化表单上的插件，并且由于所有后续调用都将被忽略，因此无法调用多次重写您的规则。

处理所有这些的正确方法是：

在页面加载时调用 .validate() 一次，然后
调用 .rules('add') 和 .rules('remove') 方法以根据需要动态切换规则。

试试这样：jsfiddle DEMO

var currTab = '#tab1'
ValidationDefaults();  // INITIALIZE PLUGIN ON FORM
Tab1Validation();      // SETUP TAB 1 with RULES

$('a[data-toggle="tab"]').on('shown.bs.tab',function(e) {
    currTab = $(e.target).attr("href"); // activated tab
});

$('#btnSubmit').on('click',function(e) {
    switch (currTab) {
        case "#tab1":
            Tab1Validation();
            break;
        case "#tab2":
            Tab2Validation();
            break;
    }
    if ($("form").valid()) {

    }
});

function Tab1Validation() {
    // ADD RULES FOR TAB 1
    $('#tab1 input').each(function() {
        $(this).rules('add',{
            require_from_group: [1,".Tab1Group"],messages: {
                require_from_group: "* You must enter either username or username2"
            }
        });
    });
    // REMOVE RULES FOR TAB 2
    $('#tab2 input').each(function() {
        $(this).rules('remove');
    });
}

function Tab2Validation() {
    // ADD RULES FOR TAB 2
    $('#tab2 input').each(function() {
        $(this).rules('add',{
            required: true,});
    });
    // REMOVE RULES FOR TAB 1
    $('#tab1 input').each(function() {
        $(this).rules('remove');
    });
}

function ValidationDefaults() {
    // INITIALIZE PLUGIN ON PAGE LOAD
    $('#Create').validate({
        rules: {
            firstname: {
                required: true
            },lastname: {
                required: true
            }
        },messages: {
            firstname: "* A first name is Required",lastname: "* A last name is Required"
        },// combine messages into one for "require_from_group"
        groups: {  
            tab1: "username username2"
        },errorElement: 'span',errorPlacement: function(error,element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },highlight: function(element,errorClass,validClass) {
            $(element).addClass('is-invalid');
        },unhighlight: function(element,validClass) {
            $(element).removeClass('is-invalid');
        }
    });
}

请注意，我使用了 jQuery .each() 将所有规则一次应用于选项卡中的所有字段。如果您需要对各个字段应用独特的规则/消息，请删除 .each() 并根据需要将 .rules() 附加到单个字段选择器。