From c591eb0e2cac111be1551b013d4e8f9728c90f1d Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Tue, 6 Sep 2016 15:42:28 +0200 Subject: [PATCH 1/6] support for multiple custom validators, including error messages --- bower.json | 2 +- demo/index.html | 31 ++- demo/{ => validators}/cats-only.html | 4 +- demo/validators/no-catfishes.html | 37 ++++ demo/validators/no-cats.html | 37 ++++ iron-validatable-behavior.html | 306 ++++++++++++++++----------- test/iron-validatable-behavior.html | 70 +++++- test/{ => validators}/cats-only.html | 27 ++- test/{ => validators}/dogs-only.html | 27 ++- test/validators/no-catfishes.html | 37 ++++ test/validators/no-cats.html | 37 ++++ 11 files changed, 455 insertions(+), 160 deletions(-) rename demo/{ => validators}/cats-only.html (88%) create mode 100644 demo/validators/no-catfishes.html create mode 100644 demo/validators/no-cats.html rename test/{ => validators}/cats-only.html (58%) rename test/{ => validators}/dogs-only.html (58%) create mode 100644 test/validators/no-catfishes.html create mode 100644 test/validators/no-cats.html diff --git a/bower.json b/bower.json index 2ebf2bc..c1657b2 100644 --- a/bower.json +++ b/bower.json @@ -25,7 +25,7 @@ "devDependencies": { "paper-styles": "PolymerElements/paper-styles#^1.0.4", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", - "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", + "iron-validator-behavior": "https://github.com/tlouisse/iron-validator-behavior.git", "test-fixture": "PolymerElements/test-fixture#^1.0.0", "web-component-tester": "^4.0.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" diff --git a/demo/index.html b/demo/index.html index 84b96a8..d12211f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -20,7 +20,9 @@ - + + + + + + + +
+ +
+ +

Multiple validators

+ +

+ Scenario: add an animal with at least two characters, but cats and catfishes are not allowed. +

+ +

Before

+
    +
  • Make custom validator for specific case (new web component that combines logic of no-cats and + no-dogs, see no-cats-or-catfishes.html) +
    • +
  • Instantiate custom validator
    • +
  • Add custom validator to input (add to validator attribute)
    • +
  • Add native validators to input (add as attribute)
    • +
  • Add custom error message
    • +
  • Eventually, keep track of validity state and dynamically change the error message
    • +
+ + + + + + + + + View sources + + + +

Before: sources

+ +

Javascript

+ 
+window.addEventListener('WebComponentsReady', function () {
+    var input = document.getElementById('before').$.input;
+    var validator = document.getElementById('combinedValidator');
+    var scope = document.getElementById('scope');
+
+    scope.msg = 'Make sure this field is not empty and contains at least two characters. Cats and catfishes are not allowed.';
+    input.addEventListener('iron-input-validate', function setErrorMessage() {
+        if (input.validity.valueMissing) {
+            scope.msg = 'Please fill in this field';
+        } else if (input.validity.patternMismatch) {
+            scope.msg = 'Use at least two characters';
+            // Note the custom validator can only be assigned to one input when using it to store state of sub validators.
+        } else if (!validator.validState.noCats) {
+            scope.msg = 'No cat(s) allowed';
+        } else if (!validator.validState.noCatfishes) {
+            scope.msg = 'No cat(fish(es)) allowed';
+        }
+    });
+});
+
+ +

HTML

+ + + 
+<no-cats-or-catfishes id="combinedValidator"></no-cats-or-catfishes>
+
+<paper-input id="before" label="Your favorite animal (*)" auto-validate
+    validator="no-cats-or-catfishes" required pattern=".{2,}"
+    error-message="[[msg]]">
+</paper-input>
+
+ + +

External validator

+ +

See 'no-cats-or-catfishes.html' ...

+ +
+ Close +
+ + +

After

+ +
    +
  • Add custom validators to input (add to validator attribute)
    • +
  • Add native validators to input (add to validator and as attribute)
    • +
+ +

+ (Note that no-cats has a higher priority than no-catfishes and its error message will therefore take + precedence over that of no-catfishes) +

+ + + + + + View sources + + + +

After: sources

+ +

HTML

+ 
<paper-input id="after" label="Your favorite animal (*)" auto-validate
+    validator="required pattern no-cats no-catfishes" required pattern=".{2,}">
+</paper-input>
+
+ +

Native messages configuration

+ +

See 'native-validators-config.html'(this configuration is needed once on a global level) ...

+ +
+ Close +
+ + +
+ +
+ + + + + diff --git a/demo/old-vs-new/native-validators-config.html b/demo/old-vs-new/native-validators-config.html new file mode 100644 index 0000000..511920d --- /dev/null +++ b/demo/old-vs-new/native-validators-config.html @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/demo/old-vs-new/no-cats-or-catfishes.html b/demo/old-vs-new/no-cats-or-catfishes.html new file mode 100644 index 0000000..9d8bbbc --- /dev/null +++ b/demo/old-vs-new/no-cats-or-catfishes.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + diff --git a/iron-validatable-behavior.html b/iron-validatable-behavior.html index c605128..9b5b111 100644 --- a/iron-validatable-behavior.html +++ b/iron-validatable-behavior.html @@ -52,7 +52,7 @@ /** * Name of the validator(s) to use. * Accepts a list of validators, separated by spaces. - * Note that the order of the validators determines the priority of the error messages. See 'error' + * Note that the order of the validators determines the priority of the error messages. */ validator: { type: String From 6e665ff450828ab125974fa9c0c61babd1517582 Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Thu, 8 Sep 2016 10:45:44 +0200 Subject: [PATCH 6/6] changed error attr from 'name' to 'validator' added resolutions documentation error message markup added resolution demo page name adjusted formatting, trying to make diffing easier in github minimize diff --- bower.json | 3 + demo/old-vs-new/index.html | 2 +- iron-validatable-behavior.html | 439 ++++++++++++++-------------- test/iron-validatable-behavior.html | 20 +- 4 files changed, 234 insertions(+), 230 deletions(-) diff --git a/bower.json b/bower.json index 204466a..2aa7b77 100644 --- a/bower.json +++ b/bower.json @@ -35,6 +35,9 @@ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" }, "resolutions": { + "paper-input": "feature/multipleValidators", + "iron-validator-behavior": "feature/multipleValidators", + "iron-input": "feature/multipleValidators", "iron-validatable-behavior": "feature/multipleValidators" } } diff --git a/demo/old-vs-new/index.html b/demo/old-vs-new/index.html index 416efcf..4485b3a 100755 --- a/demo/old-vs-new/index.html +++ b/demo/old-vs-new/index.html @@ -4,7 +4,7 @@ - tgc-forms Demo + Multiple validators - Before and after diff --git a/iron-validatable-behavior.html b/iron-validatable-behavior.html index 9b5b111..1c9dda9 100644 --- a/iron-validatable-behavior.html +++ b/iron-validatable-behavior.html @@ -13,224 +13,225 @@ diff --git a/test/iron-validatable-behavior.html b/test/iron-validatable-behavior.html index ab808fa..e9d1b46 100644 --- a/test/iron-validatable-behavior.html +++ b/test/iron-validatable-behavior.html @@ -185,10 +185,10 @@ var validatable = fixture('multipleValidators')[2]; validatable.validate('cat'); assert.equal(validatable.errors.length, 2); - assert.equal(validatable.errors[0].name, 'no-cats'); + assert.equal(validatable.errors[0].validator, 'no-cats'); assert.equal(validatable.errors[0].message, 'No cat(s) allowed'); assert.equal(validatable.errors[0].priority, 0); - assert.equal(validatable.errors[1].name, 'no-catfishes'); + assert.equal(validatable.errors[1].validator, 'no-catfishes'); assert.equal(validatable.errors[1].message, 'No cat(fish(es)) allowed'); assert.equal(validatable.errors[1].priority, 1); }); @@ -215,13 +215,13 @@ validatable.value = ''; validatable.validate(); - assert.equal(validatable.errors[0].name, 'required'); + assert.equal(validatable.errors[0].validator, 'required'); assert.equal(validatable.errors[0].priority, 0); - assert.equal(validatable.errors[1].name, 'cats-only'); + assert.equal(validatable.errors[1].validator, 'cats-only'); assert.equal(validatable.errors[1].priority, 1); - assert.equal(validatable.errors[2].name, 'dogs-only'); + assert.equal(validatable.errors[2].validator, 'dogs-only'); assert.equal(validatable.errors[2].priority, 2); }); @@ -230,9 +230,9 @@ validatable.value = '2'; validatable.validate(); - assert.equal(validatable.errors[0].name, 'min'); + assert.equal(validatable.errors[0].validator, 'min'); assert.equal(validatable.errors[0].priority, 0); - assert.equal(validatable.errors[1].name, 'step'); + assert.equal(validatable.errors[1].validator, 'step'); assert.equal(validatable.errors[1].priority, 1); }); @@ -240,7 +240,7 @@ var validatable = fixture('override-native-messages').querySelector('[min]'); validatable.validate(); - assert.equal(validatable.errors[0].name, 'min'); + assert.equal(validatable.errors[0].validator, 'min'); assert.equal(validatable.errors[0].message, 'customMin'); }); @@ -264,7 +264,7 @@ validatable.validate(); - assert.equal(validatable.errors[0].name, validator, 'Validator [' + validator + '] is not triggered'); + assert.equal(validatable.errors[0].validator, validator, 'Validator [' + validator + '] is not triggered'); assert.equal(validatable.errors[0].message, msg, 'Validation message for validator [' + validator + '] is not set properly'); }); }); @@ -280,7 +280,7 @@ validatable.validate(); - assert.equal(validatable.errors[0].name, validator, 'Validator [' + validator + '] is not triggered'); + assert.equal(validatable.errors[0].validator, validator, 'Validator [' + validator + '] is not triggered'); assert.equal(validatable.errors[0].message, msg, 'Validation message for validator [' + validator + '] is not set properly'); }); });