jQuery验证忽略它自己的默认值

Question

我正试图在jquery validate旁边使用angularjs。 （是的，我意识到angular有自己的验证库。我不想使用那个）并且在尝试设置jquery.validate的默认值时会遇到一些奇怪的行为。

我把它连接起来......

jquery.validators.setup.js

$.validator.setDefaults({
   errorClass: "has-error",
   validClass: "has-success",
   highlight: function(element, errorClass, validClass){
      console.log("highlighting: ", element, errorClass, validClass);
   },
   unhighlight: function(element, errorClass, validClass){
      console.log("unhighlighting", element, errorClass, validClass);
   },
   errorPlacement: function(error, element){
      console.log("error on: ", element, error);
   }
});

显然我会更多地扩展这些行为，但我需要它们至少先触发它们。所以我的HTML看起来像这样。我使用novalidate来阻止HTML5验证，只使用jquery验证。

的index.html

<form role="form" novalidate>
   <div class="form-group">
      <h1>Name</h1>
      <input type="text" class="form-control input-lg"
         placeholder="Name"
         required
         minlength="3"
         maxlength="24"
         data-ng-model="Model.Name" />
   </div>
</form>

从各方面来看，我认为这应该有效......但它根本不会触发验证事件。我试图确保它们在模糊时发射，我希望避免在我的角度控制器中连接任何东西。

Answer 1

The .validate() method 必须才能调用（附加到form）以初始化插件;通常在DOM ready事件处理程序中，在之前调用任何其他jQuery Validate方法。您可以将所有选项放在.validate()内，而不是setDefaults方法中。 .setDefaults()通常仅在您拥有多个共享常用设置的表单时使用。

是的，您可以随时使用the .rules() methods动态修改，添加和删除规则。

有关此插件的基本用法的更多信息，请参阅the tag wiki page。

$(document).ready(function() {  // <- DOM ready event
    $('#myform').validate({     // <- initialize the plugin
        // rules, options and callbacks
        errorClass: "has-error",
        validClass: "has-success",
        highlight: function(element, errorClass, validClass){
            console.log("highlighting: ", element, errorClass, validClass);
        },
        unhighlight: function(element, errorClass, validClass){
            console.log("unhighlighting", element, errorClass, validClass);
        },
        errorPlacement: function(error, element){
            console.log("error on: ", element, error);
        }
    });
});

请注意，由于您使用console.log覆盖了所有标准回调，因此默认功能将会消失。