Question

我有两个html元素。一个是选择框，下面是文本输入框。如果我更改上面的选择框，那么我想更改文本输入框的JQuery验证规则。下面的代码似乎正确运行（标签已更改），但验证不会发生在焦点或点击事件上，就像我期望的那样。

以下是我更改选择框值时更改规则的代码。我错过了什么吗？

＆＃13;

$('#Countries.selectpicker').on('change', function() {
  $("#Location").val('');
  var selected = $(this).find("option:selected").val();
  if (selected != "0") {
    //alert("other country selected");
    $(".locationLabel").text("City");
    $("#Location").attr("placeholder", "e.g. London");
    $("#Location").attr("type", "string");
    $("#Location").rules("remove");
    $('#Location').rules("add", {
      required: true,
      minlength: 3,
      maxlength: 40,
      messages: {
        required: "Required input",
        minlength: jQuery.validator.format("Please, {0} characters are necessary"),
        maxlength: jQuery.validator.format("Please, {0} characters are necessary")
      }
    });
  } else {
    //alert("us selected");
    $(".locationLabel").text("Zip Code");
    $("#Location").attr("placeholder", "e.g. 94901");
    $("#Location").attr("type", "number");
    $("#Location").rules("remove");
    $('#Location').rules("add", {
      required: true,
      minlength: 5,
      maxlength: 5,
      messages: {
        required: "Required input",
        minlength: jQuery.validator.format("Please, {0} characters are necessary"),
        maxlength: jQuery.validator.format("Please, {0} characters are necessary")
      }
    });
  }
});

＆＃13;

Answer 1

您可以使用自定义模糊处理程序手动触发验证，例如

＆＃13;

jQuery(function($) {
  var $Countries = $('#Countries.selectpicker');
  var validator = $('#myform').validate({
    onfocusout: function(el) {
      this.element(el)
    },
    rules: {
      Location: {
        required: true,
        minlength: function() {
          return $Countries.val() == '0' ? 5 : 3
        },
        maxlength: function() {
          return $Countries.val() == '0' ? 5 : 40
        }
      }
    },
    messages: {
      Location: {
        required: "Required input",
        minlength: jQuery.validator.format("Please, {0} characters are necessary"),
        maxlength: jQuery.validator.format("Please, {0} characters are necessary")
      }
    }
  });

  $('#Countries.selectpicker').on('change', function() {
    $("#Location").val('');
    var selected = $(this).find("option:selected").val();
    if (selected != "0") {
      //alert("other country selected");
      $(".locationLabel").text("City");
      $("#Location").attr("placeholder", "e.g. London");
      $("#Location").attr("type", "string");
    } else {
      //alert("us selected");
      $(".locationLabel").text("Zip Code");
      $("#Location").attr("placeholder", "e.g. 94901");
      $("#Location").attr("type", "number");
    }
    $("#myform").valid()
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="myform" method="post" action="">
  <select id="Countries" class="selectpicker" name="Countries">
    <option>0</option>
    <option>!0</option>
  </select>
  <input id="Location" name="Location">
  <input type="submit" value="Save" />
</form>

＆＃13;

Answer 2

Quote OP's comment，

“以我的方式，我没有调用任何element.validate（）方法”

那就是你的整个问题。首先必须使用.validate()方法来初始化表单上的jQuery Validate插件。在没有首先初始化插件的情况下，.rules()方法无效。

$(document).ready(function() {  // DOM is ready

    $("#myform").validate({ // initialize the plugin on your form
        // initial rules & options
    });

    $('#Countries.selectpicker').on('change', function() {
        // now you can dynamically change the rules
        $("#Location").rules( ....

        // when you're done changing the rules, you can trigger an immediate test  
        $("#Location").valid();
    });

});

修改规则后，JQuery验证无法正常工作

2 个答案: