修改規則後JQuery驗證不工作

Question

我有兩個html元素。一個是選擇框，在它下面是一個文本輸入框。如果我更改上面的選擇框，那麼我想更改文本輸入框的JQuery驗證規則。下面的代碼似乎正確運行（標籤已更改），但驗證不會發生在焦點輸出或單擊事件上，就像我期望的那樣。

這是我更改選擇框值時更改規則的代碼。我錯過了什麼嗎？

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

Answer 1

你可以有一個自定義的模糊處理程序來觸發驗證手動像

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() 
 
    }); 
 
});

<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>

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(); 
    }); 

});