pat-validation: Added the possibility to check for fields equality

CHANGES.md

@@ -4,6 +4,7 @@
 
 Features
 ~~~~~~~~
+- pat-validation: Added the possibility to check for fields equality
 - pat-validation: Dont use :input jquery extension for better performance
 - pat-validation: Update validate.js to 0.13.1
 - Prevent "Modernizr.inputtypes is undefined" error

src/pat/validation/documentation.md

@@ -8,7 +8,7 @@ The validation pattern is triggered by a single class `pat-validation` on the fo
 This pattern has several advantages over standard HTML 5 form validation:
 
 - it supports older browsers
-- it uses simple documented HTML markup to allow non-browser-specific styling of error messages 
+- it uses simple documented HTML markup to allow non-browser-specific styling of error messages
 - it supports extra validation rules
 
 ### The following attributes may be used.
@@ -68,9 +68,11 @@ Error messages can also be overridden on a per-field basis, for example:
 | Property          | Description                                                                        | Default | Type |
 |-------------------|------------------------------------------------------------------------------------|---------|------|
 | disable-selector  | A selector for elements that should be disabled when there are errors in the form. |         | CSS Selector |
+| equality          | Field-specific. The name of another input this input should equal to (useful for password confirmation). | | String |
 | message-date      | The error message for date fields.        | This value must be a valid date | String |
 | message-datetime  | The error message for datetime fields.    | This value must be a valid date and time | String |
 | message-email     | The error message for email fields.       | This value must be a valid email address | String |
+| message-equality  | The error message for fields required to be equal | is not equal to %{attribute} | String|
 | message-integer   | The error message for integers.           | This value must be an integer | String |
 | message-max       | The error message for max number values.  | This value must be less than or equal to %{count} | String |
 | message-min       | The error message for min number values.  | This value must be greater than or equal to %{count} | String |

src/pat/validation/index.html

@@ -57,6 +57,23 @@
                     />
             </label>
 
+            <label>Password
+              <input
+                  id="password"
+                  type="password"
+                  name="password"
+              />
+            </label>
+
+            <label>Password confirmation
+              <input
+                  id="password-confirmation"
+                  type="password"
+                  name="password-confirmation"
+                  data-pat-validation="equality: password; message-equality: I would like this to be equal to %{attribute}"
+              />
+            </label>
+
             <fieldset class="buttons">
               <button class="pat-button">Test</button>
             </fieldset>

src/pat/validation/tests.js

@@ -263,5 +263,33 @@ define(["pat-registry", "pat-validation"], function(registry, pattern) {
             expect($el.find('em.warning').length).toBe(0);
             expect($el.find('#form-buttons-create')[0].disabled).toBe(false);
         });
+
+        it("can check for password confirmation", function() {
+            var $el = $(
+                '<form class="pat-validation" data-pat-validation="disable-selector:#form-buttons-create">'+
+                '  <input type="password" name="password">' +
+                '  <input type="password" name="password-confirmation"' +
+                '         data-pat-validation="equality: password; message-equality: I would like this to be equal to %{attribute}"' +
+                '  > ' +
+                '  <button id="form-buttons-create" type="submit">Submit</button>' +
+                '</form>'
+            );
+            $('#lab').append($el);
+            var $password = $el.find('[name=password]');
+            var $password_confirmation = $el.find('[name=password-confirmation]');
+            $password.val('foo');
+            $password_confirmation.val('bar');
+            pattern.init($el);
+            $password_confirmation.trigger('change');
+            expect($el.find('em.warning').length).toBe(1);
+            expect($el.find('em.warning').text()).toBe("I would like this to be equal to password");
+            expect($el.find('#form-buttons-create')[0].disabled).toBe(true);
+
+            $password_confirmation.val('foo');
+            $password_confirmation.trigger('change');
+            expect($el.find('em.warning').length).toBe(0);
+            expect($el.find('#form-buttons-create')[0].disabled).toBe(false);
+        });
+
     });
 });

src/pat/validation/validation.js

@@ -26,8 +26,11 @@ define([
     parser.addArgument("message-min", "This value must be greater than or equal to %{count}");
     parser.addArgument("message-number", "This value must be a number");
     parser.addArgument("message-required", "This field is required");
+    parser.addArgument("message-equality", "is not equal to %{attribute}");
+    parser.addArgument("message-confirm", "This field is required");
     parser.addArgument("not-after");
     parser.addArgument("not-before");
+    parser.addArgument("equality");
     parser.addArgument("type", undefined, ["integer", "date", "datetime"]);
     var VALIDATION_TYPE_MAP = {
         'required': 'presence',
@@ -163,6 +166,18 @@ define([
                     constraint.numericality.onlyInteger = true;
                 }
             }
+
+            // Handle fields equality
+            if (opts.equality) {
+                this.$el.find("[name=" + opts.equality + "]").each(
+                    function (idx, el) {
+                        if (input.value !== el.value) {
+                            constraint.equality = {'attribute': opts.equality, 'message': '^'+opts.message["equality"]};
+                        }
+                    }
+                );
+            }
+
             // Set local validation messages.
             _.each(Object.keys(VALIDATION_TYPE_MAP), function (type) {
                 var c = constraints[name][VALIDATION_TYPE_MAP[type]];