Validator works in multi-forms with one function call

README.md

@@ -25,7 +25,7 @@ $('#form_id').validator(options);
 ```js
 options = {
   // 需要校验的表单项，（默认是 `[required]`），支持任何 jQuery 选择器可以选择的标识
-  identifie: {String},
+  identifier: {String},
 
   // 校验不通过时错误时添加的 class 名（默认是 `error`），当校验为空时，还同时拥有 `empty` 这个 classname
   klass: {String},
@@ -41,8 +41,27 @@ options = {
 
   before: {Function}, // 表单检验之前
   after: {Function}, // 表单校验之后，只有 __return true__ 才会提交表单
+  allowReturn: {Boolean | true} // 是否禁用表单回车提交，false 禁用
  }
 ```
+全局配置，类似$.ajaxSetup，可以把一些共用配置抽出来，不用每次单独写，比如 errorCallback。setup 放在 validator 实例化之前。
+
+```js
+$.validatorSetup({
+  // 错误出现时 `klass` 放在当前表单项还是父节点（默认是当前表单项）
+  isErrorOnParent: {Boolean},
+
+  // 触发表单项校验的方法，当是 false 在点 submit 按钮之前不校验（默认是 `blur`）
+  method: {String | false},
+
+  // 出错时的 callback，第一个参数是所有出错表单项集合
+  errorCallback(unvalidFields): {Function},
+
+  before: {Function}, // 表单检验之前
+  after: {Function}, // 表单校验之后，只有 __return true__ 才会提交表单
+  allowReturn: {Boolean | true} // 是否禁用表单回车提交，false 禁用
+})
+```
 
 ### 二、验证表单
 ```js
@@ -162,6 +181,22 @@ $('#event').on('after:hello', function(event, element){
 </div>
 ```
 
+#### 7. 自定义pattern
+定义了一个全局 `FormValidator` 对象，里面有 `registerPattern` 和 `unRegisterPattern` 两个方法，支持 **自定义pattern**，html中的`data-pattern`被用以识别自定义`pattern`，属性值为`string`。若需要使用 `data-pattern`，则 `$el.attr('pattern')`应为空。自定义方法中传入了当前表单项的值以及当前表单项，自定义方法应该返回Boolean，例：
+```html
+ <input type="text" data-pattern="userName">
+```
+
+``` javascript
+  FormValidator.registerPattern("userName", function(val, $el){
+    return val > 0 ? true : false
+  })
+
+  FormValidator.unRegisterPattern("userName")
+
+
+```
+
 ## 通用约定和代码规范：
 
 - 以 2-spaces 作为缩进

index.html

@@ -91,34 +91,54 @@ <h3># form validator</h3>
   <div>
     <div class="editable" contenteditable required pattern="^\d+$">123</div>
   </div>
+  <div class="new-input-area"></div>
+  <p>
+    <button id='js-add-input' type="button">add new input </button>
+  </p>
+
 
-  <input type="submit" value="send"/>
-  <input id="validate-form" type="button" value="validate without submit" />
+  <p>
+    <input type="submit" value="send"/>
+  </p>
 </form>
 
+
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="validator.js"></script>
 <script type="text/javascript">
-  $('#form').validator({
-    errorCallback: function(unvalidFields){
-        $(unvalidFields).each(function(i,item){
-          //console.log(item.$el[0])
-        })
+
+  $.validatorSetup({
+    errorCallback: function(fields){
+      // may not support form in modal
+      if (fields.length) {
+        var top = fields[0].$el.offset().top - 100
+        $('html, body').animate({ scrollTop: top })
+      }
     }
-    , isErrorOnParent: true
+  })
+
+  $('#form').validator({
+    isErrorOnParent: true
   });
 
+  var nameIndex = 1;
+
+  $('#js-add-input').on("click", function(){
+    $('.new-input-area').append($('<p>6-20 charsets [input-' + nameIndex + ']: <input type="text" name="new-' + ++nameIndex + '" required pattern="^.{6,20}$"></p>'))
+  })
+
+  $('#form').on('submit', function(event){
+    event.preventDefault();
+    alert("submitted!");
+  })
+
   $('#event').on('before:hello', function(event, element){
     //console.log('`before.hello` event trigger on $("#' + element.id + '")');
   })
 
   $('#event').on('after:hello', function(event, element){
     //console.log('`after.hello` event trigger on $("#' + element.id + '")');
   })
-
-  $('#validate-form').on('click', function(){
-    $(this).closest('form').validate()
-  })
 </script>
 
 </body>