add ability to handle equality rule by validate.js

README.md

@@ -39,6 +39,15 @@ So we need to define these rules. In the controller add:
   }
 ```
 
+### Validating Password
+
+Validating the equality of password and password confirmation can be done by using the rule below.
+
+```Javascript
+  static rules = {
+    password_confirmation: { equality: { attribute: "password" } }
+  }```
+
 Each key in rules corresponds to an attribute defined in the markup.
 
 ### HTML

spec/attributes_spec.js

@@ -34,8 +34,10 @@ describe("Attributes", function() {
       const name = this.form.querySelector("#name")
       const email = this.form.querySelector("#email")
       const terms = this.form.querySelector("#terms")
+      const password = this.form.querySelector("#password")
+      const password_confirmation = this.form.querySelector("#password_confirmation")
 
-      expect(this.validationElementsArray).to.have.members([name, email, terms])
+      expect(this.validationElementsArray).to.have.members([name, email, terms, password, password_confirmation])
     })
 
     it("only includes attr that identifier prefix", function() {
@@ -49,7 +51,7 @@ describe("Attributes", function() {
       const mapKeys = Array.from(this.attributes.dataMap.keys())
       const mapValues = Array.from(this.attributes.dataMap.values())
 
-      expect(mapKeys).to.have.members(["name", "email", "terms"])
+      expect(mapKeys).to.have.members(["name", "email", "terms", "password", "password_confirmation"])
       expect(mapValues).to.all.be.an.instanceof(Attribute)
     })
   })

spec/fixtures/form.html.js

@@ -18,6 +18,9 @@ export default `<div data-controller="validations">
     <input type="text" data-attr="address" id="address">
     <input type="text" data-attr="my-validations.address" id="city">
 
+    <input type="password" data-attr="validations.password" id="password" data-action="blur->validations#validate">
+    <input type="password" data-attr="validations.password_confirmation" id="password_confirmation" data-action="blur->validations#validate">
+
     <input type="submit" >
   </form>
 </div>`

spec/validator_spec.js

@@ -24,7 +24,8 @@ describe("Validator", function() {
         validators: { agree: { attributes: ["terms"] } },
         rules: {
           name: { presence: { allowEmpty: false } },
-          email: { presence: { allowEmpty: false }, email: true }
+          email: { presence: { allowEmpty: false }, email: true },
+          password_confirmation: { equality: { attribute: "password" } }
         }
       }
     }
@@ -132,6 +133,18 @@ describe("Validator", function() {
 
         expect(this.validator.validatejsParams("name")).to.eql(params)
       })
+
+    })
+
+    context("equality rule", function() {
+      it("returns validatajs params for password_confirmation", function() {
+        const params = [
+          { password: "", password_confirmation: "" },
+          { password_confirmation: { equality: { attribute: "password" } } }
+        ]
+
+        expect(this.validator.validatejsParams("password_confirmation")).to.eql(params)
+      })
     })
   })
 })

src/validator.js

@@ -53,7 +53,17 @@ export class Validator {
     }
 
     const { value } = this.attributes.get(attribute)
-    return [{ [attribute]: value }, { [attribute]: this.rules[attribute] }]
+    const validateValue = {
+      [attribute]: value,
+    }
+
+    if (rule.equality) {
+      const anotherAttribute = rule.equality.attribute
+      const { value } = this.attributes.get(anotherAttribute)
+      validateValue[anotherAttribute] = value
+    }
+
+    return [validateValue, { [attribute]: this.rules[attribute] }]
   }
 
   get rules() {