如何根据下拉列表动态更改jquery验证规则

时间:2018-07-26 07:42:11

标签: javascript jquery forms validation

我有一个产品选择下拉菜单。当有人选择产品时,我会从选择中提取特定的验证数据。但是,如果有人需要在点击“提交”之前更改产品,则需要加载新的验证条件。

我现在具有验证数据作为JS对象。而且我可以在控制台中访问它,选择它后会给我正确的数据。但是,jQuery validate保留第一个选定的信息。

您可以在此处查看示例: http://jsfiddle.net/lz430/689ouzbf/2/

jQuery(document).ready(function($) {
  $("#product-validation input")
    .not(':button, :submit, :reset, :hidden')
    .removeClass('error')
    //.val('')
    .prop('checked', false)
    .prop('selected', false);
  $("label.error").hide();

  var validator,
    DPPSI_1_50_min,
    DPPSI_1_50_max,
    DPPSI_2_40_min,
    DPPSI_2_40_max,
    DPPSI_3_30_min,
    DPPSI_3_30_max,
    DPPSI_4_20_min,
    DPPSI_4_20_max,
    DPPSI_5_10_min,
    DPPSI_5_10_max,
    DPPSI_6_0_min,
    DPPSI_6_0_max,
    ca_1_50_min,
    ca_1_50_max,
    ca_2_40_min,
    ca_2_40_max,
    ca_3_30_min,
    ca_3_30_max,
    ca_4_20_min,
    ca_4_20_max,
    ca_5_10_min,
    ca_5_10_max,
    ca_6_0_min,
    ca_6_0_max,
    messages;

  // Registration username
  var matchtext = $("#input_2_1");
  $("#input_2_5_3").on('change', function() {
    console.log(this.value);
    matchtext.val($(this).val());
  });


  function validData(dataAttr) {
    DPPSI_1_50_min = dataAttr.dppsi_1_50_min;
    DPPSI_1_50_max = dataAttr.dppsi_1_50_max;
    DPPSI_2_40_min = dataAttr.dppsi_2_40_min;
    DPPSI_2_40_max = dataAttr.dppsi_2_40_max;
    DPPSI_3_30_min = dataAttr.dppsi_3_30_min;
    DPPSI_3_30_max = dataAttr.dppsi_3_30_max;
    DPPSI_4_20_min = dataAttr.dppsi_4_20_min;
    DPPSI_4_20_max = dataAttr.dppsi_4_20_max;
    DPPSI_5_10_min = dataAttr.dppsi_5_10_min;
    DPPSI_5_10_max = dataAttr.dppsi_5_10_max;
    DPPSI_6_0_min = dataAttr.dppsi_6_0_min;
    DPPSI_6_0_max = dataAttr.dppsi_6_0_max;

    ca_1_50_min = dataAttr.ca_1_50_min;
    ca_1_50_max = dataAttr.ca_1_50_max;
    ca_2_40_min = dataAttr.ca_2_40_min;
    ca_2_40_max = dataAttr.ca_2_40_max;
    ca_3_30_min = dataAttr.ca_3_30_min;
    ca_3_30_max = dataAttr.ca_3_30_max;
    ca_4_20_min = dataAttr.ca_4_20_min;
    ca_4_20_max = dataAttr.ca_4_20_max;
    ca_5_10_min = dataAttr.ca_5_10_min;
    ca_5_10_max = dataAttr.ca_5_10_max;
    ca_6_0_min = dataAttr.ca_6_0_min;
    ca_6_0_max = dataAttr.ca_6_0_max;

    return dataAttr;
  }

  function validateAll(dataAttr) {
    $("#product-validation").validate({
      debug: true,
      rules: {
        DPPSI_1_50: {
          range: [DPPSI_1_50_min, DPPSI_1_50_max],
          number: true
        },
        DPPSI_2_40: {
          range: [DPPSI_2_40_min, DPPSI_2_40_max],
          number: true
        },
        DPPSI_3_30: {
          range: [DPPSI_3_30_min, DPPSI_3_30_max],
          number: true
        },
        DPPSI_4_20: {
          range: [DPPSI_4_20_min, DPPSI_4_20_max],
          number: true
        },
        DPPSI_5_10: {
          range: [DPPSI_5_10_min, DPPSI_5_10_max],
          number: true
        },
        DPPSI_6_00: {
          range: [DPPSI_6_0_min, DPPSI_6_0_max],
          number: true
        },

        CA_1_50: {
          range: [ca_1_50_min, ca_1_50_max],
          number: true,
        },
        CA_2_40: {
          range: [ca_2_40_min, ca_2_40_max],
          number: true,
        },
        CA_3_30: {
          range: [ca_3_30_min, ca_3_30_max],
          number: true,
        },
        CA_4_20: {
          range: [ca_4_20_min, ca_4_20_max],
          number: true,
        },
        CA_5_10: {
          range: [ca_5_10_min, ca_5_10_max],
          number: true,
        },
        CA_6_00: {
          range: [ca_6_0_min, ca_6_0_max],
          number: true,
        },
      },
      messages: {
        DPPSI_1_50: "The range should be between " + DPPSI_1_50_min + " and " + DPPSI_1_50_max,
        DPPSI_2_40: "The range should be between " + DPPSI_2_40_min + " and " + DPPSI_2_40_max,
        DPPSI_3_30: "The range should be between " + DPPSI_3_30_min + " and " + DPPSI_3_30_max,
        DPPSI_4_20: "The range should be between " + DPPSI_4_20_min + " and " + DPPSI_4_20_max,
        DPPSI_5_10: "The range should be between " + DPPSI_5_10_min + " and " + DPPSI_5_10_max,
        DPPSI_6_0: "The range should be between " + DPPSI_6_0_min + " and " + DPPSI_6_0_max,

        CA_1_50: "The range should be between " + ca_1_50_min + " and " + ca_1_50_max,
        CA_2_40: "The range should be between " + ca_2_40_min + " and " + ca_2_40_max,
        CA_3_30: "The range should be between " + ca_3_30_min + " and " + ca_3_30_max,
        CA_4_20: "The range should be between " + ca_4_20_min + " and " + ca_4_20_max,
        CA_5_10: "The range should be between " + ca_5_10_min + " and " + ca_5_10_max,
        CA_6_00: "The range should be between " + ca_6_0_min + " and " + ca_6_0_max,
      },
      submitHandler: function(form) {
        form.submit();
      }
    });
    // console.log("validateAll function: " + dataAttr);
  };

  $("#product").on('change', function() {
    $("#product-validation input").not(':button, :submit, :reset, :hidden').removeClass('error').prop('checked', false).prop('selected', false);
    $("label.error").hide();

    var dataAttr = $("#product").find(":selected").data();
    var name = $("#model").val(dataAttr.name);
    var details = $("#description").val(dataAttr.details);
    var serial = $("#serial").val(dataAttr.serial);

    validData(dataAttr);
    console.log(dataAttr);
  });

  $("input#void_submit").click(function() {
    validator.destroy();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

尽管我不确定为什么它在JSFiddle中不起作用。但是您可以看到,我正在注销对象,并且获得了正确的值。我只需要将这些传递给jquery验证。

任何帮助都将受到赞赏!

0 个答案:

没有答案