markup with rules

README.md

@@ -40,6 +40,7 @@ Ideal Forms 3 is **not** compatible with version 2. You can still find Ideal For
 - [Setup](#setup)
 - [Options](#options)
 - [Markup](#markup)
+    - [Markup with Rules](#markup-with-rules)
     - [Custom Markup](#custom-markup)
 - [Adding Rules](#adding-rules)
     - [Custom Errors](#custom-errors)
@@ -219,6 +220,36 @@ You can get started quickly using Ideal Forms' default markup:
 </form>
 ```
 
+### Markup with Rules
+
+You can build simple forms by adding the rules to the markup, using the `data-idealforms-rules` attribute:
+
+```html
+<form class="idealforms" novalidate autocomplete="off" action="/" method="post">
+
+  <!-- Single -->
+  <div class="field">
+    <label class="main">Username:</label>
+    <input name="username" type="text" data-idealforms-rules="required username">
+    <span class="error"></span>
+  </div>
+
+  <!-- Group
+  On inputs that share the same name,
+  you only need to add the rules on the first one -->
+  <div class="field">
+    <label class="main">Hobbies:</label>
+    <p class="group">
+      <label><input name="group[]" type="checkbox" value="A" data-idealforms-rules="minoption:1 maxoption:2">A</label>
+      <label><input name="group[]" type="checkbox" value="B">B</label>
+      <label><input name="group[]" type="checkbox" value="C">C</label>
+    </p>
+    <span class="error"></span>
+  </div>
+
+</form>
+```
+
 ### Custom Markup
 
 Ideal Forms 3 has been built from scratch with flexibility in mind. The markup is no longer tied to the plugin. If the default markup doesn't work for you, you can create your own markup. Ideal Forms will look for the following:

js/i18n/jquery.idealforms.i18n.fr.js

@@ -12,7 +12,6 @@ $.idealforms.i18n.fr = {
   },
 
   errors: {
-
     required: 'Ce champ est obligatoire',
     digits: 'Veuillez fournir seulement des chiffres',
     name: 'Veuillez fournir au moins 3 caractères et seulment des lettres',

js/private.js

@@ -12,11 +12,11 @@ module.exports = {
     this.$inputs = $();
 
     this._extend($.idealforms.extensions);
-
     this._i18n();
 
     this._inject('_init');
 
+    this._addMarkupRules();
     this.addRules(this.opts.rules || {});
 
     this.$form.submit(function(e) {
@@ -32,6 +32,18 @@ module.exports = {
     }
   },
 
+  _addMarkupRules: function() {
+
+    var rules = {};
+
+    this.$form.find('input, select, textarea').each(function() {
+      var rule = $(this).data('idealforms-rules');
+      if (rule && ! rules[this.name]) rules[this.name] = rule;
+    });
+
+    this.addRules(rules);
+  },
+
   _i18n: function() {
 
     var self = this;

js/public.js

@@ -14,11 +14,9 @@ module.exports = {
     $.extend(this.opts.rules, rules);
 
     $inputs.each(function(){ self._buildField(this) });
-
     this.$inputs = this.$inputs.add($inputs);
 
     this._validateAll();
-
     this.$fields.find(this.opts.error).hide();
 
     this._inject('addRules');