Skip to content

Commit

Permalink
Add validity class target selector configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@farneman
farneman committed May 18, 2017
1 parent 1d9aeb5 commit 57eb2aa
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 53 deletions.
26 changes: 14 additions & 12 deletions dist/hyperform.amd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2424,6 +2424,7 @@ define(function () { 'use strict';
enumerable: true,
get: function get() {
var wrapper = get_wrapper(this.element);
var classElementTarget = wrapper && typeof wrapper.settings.classSelector === 'function' ? wrapper.settings.classSelector(this.element) : this.element;
var validClass = wrapper && wrapper.settings.classes.valid || 'hf-valid';
var invalidClass = wrapper && wrapper.settings.classes.invalid || 'hf-invalid';
var userInvalidClass = wrapper && wrapper.settings.classes.userInvalid || 'hf-user-invalid';
Expand All @@ -2432,18 +2433,18 @@ define(function () { 'use strict';
var outOfRangeClass = wrapper && wrapper.settings.classes.outOfRange || 'hf-out-of-range';
var validatedClass = wrapper && wrapper.settings.classes.validated || 'hf-validated';

this.element.classList.add(validatedClass);
classElementTarget.classList.add(validatedClass);

if (is_validation_candidate(this.element)) {
for (var _prop in validity_state_checkers) {
if (validity_state_checkers[_prop](this.element)) {
this.element.classList.add(invalidClass);
this.element.classList.remove(validClass);
this.element.classList.remove(userValidClass);
classElementTarget.classList.add(invalidClass);
classElementTarget.classList.remove(validClass);
classElementTarget.classList.remove(userValidClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userInvalidClass);
classElementTarget.classList.add(userInvalidClass);
} else {
this.element.classList.remove(userInvalidClass);
classElementTarget.classList.remove(userInvalidClass);
}
this.element.setAttribute('aria-invalid', 'true');
return false;
Expand All @@ -2452,12 +2453,12 @@ define(function () { 'use strict';
}

message_store.delete(this.element);
this.element.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
this.element.classList.add(validClass, inRangeClass);
classElementTarget.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
classElementTarget.classList.add(validClass, inRangeClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userValidClass);
classElementTarget.classList.add(userValidClass);
} else {
this.element.classList.remove(userValidClass);
classElementTarget.classList.remove(userValidClass);
}
this.element.setAttribute('aria-invalid', 'false');
return true;
Expand Down Expand Up @@ -2513,6 +2514,7 @@ define(function () { 'use strict';
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

var classes = _ref.classes;
var classSelector = _ref.classSelector;
var _ref$debug = _ref.debug;
var debug = _ref$debug === undefined ? false : _ref$debug;
var extend_fieldset = _ref.extend_fieldset;
Expand Down Expand Up @@ -2570,7 +2572,7 @@ define(function () { 'use strict';
}

var settings = { debug: debug, strict: strict, preventImplicitSubmit: preventImplicitSubmit, revalidate: revalidate,
validEvent: validEvent, extendFieldset: extendFieldset, classes: classes };
validEvent: validEvent, extendFieldset: extendFieldset, classes: classes, classSelector: classSelector };

if (form instanceof window.NodeList || form instanceof window.HTMLCollection || form instanceof Array) {
return Array.prototype.map.call(form, function (element) {
Expand Down Expand Up @@ -2645,4 +2647,4 @@ define(function () { 'use strict';

return hyperform;

});
});
4 changes: 2 additions & 2 deletions dist/hyperform.amd.min.js
View file

Large diffs are not rendered by default.

26 changes: 14 additions & 12 deletions dist/hyperform.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2424,6 +2424,7 @@ Object.defineProperty(ValidityStatePrototype, 'valid', {
enumerable: true,
get: function get() {
var wrapper = get_wrapper(this.element);
var classElementTarget = wrapper && typeof wrapper.settings.classSelector === 'function' ? wrapper.settings.classSelector(this.element) : this.element;
var validClass = wrapper && wrapper.settings.classes.valid || 'hf-valid';
var invalidClass = wrapper && wrapper.settings.classes.invalid || 'hf-invalid';
var userInvalidClass = wrapper && wrapper.settings.classes.userInvalid || 'hf-user-invalid';
Expand All @@ -2432,18 +2433,18 @@ Object.defineProperty(ValidityStatePrototype, 'valid', {
var outOfRangeClass = wrapper && wrapper.settings.classes.outOfRange || 'hf-out-of-range';
var validatedClass = wrapper && wrapper.settings.classes.validated || 'hf-validated';

this.element.classList.add(validatedClass);
classElementTarget.classList.add(validatedClass);

if (is_validation_candidate(this.element)) {
for (var _prop in validity_state_checkers) {
if (validity_state_checkers[_prop](this.element)) {
this.element.classList.add(invalidClass);
this.element.classList.remove(validClass);
this.element.classList.remove(userValidClass);
classElementTarget.classList.add(invalidClass);
classElementTarget.classList.remove(validClass);
classElementTarget.classList.remove(userValidClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userInvalidClass);
classElementTarget.classList.add(userInvalidClass);
} else {
this.element.classList.remove(userInvalidClass);
classElementTarget.classList.remove(userInvalidClass);
}
this.element.setAttribute('aria-invalid', 'true');
return false;
Expand All @@ -2452,12 +2453,12 @@ Object.defineProperty(ValidityStatePrototype, 'valid', {
}

message_store.delete(this.element);
this.element.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
this.element.classList.add(validClass, inRangeClass);
classElementTarget.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
classElementTarget.classList.add(validClass, inRangeClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userValidClass);
classElementTarget.classList.add(userValidClass);
} else {
this.element.classList.remove(userValidClass);
classElementTarget.classList.remove(userValidClass);
}
this.element.setAttribute('aria-invalid', 'false');
return true;
Expand Down Expand Up @@ -2513,6 +2514,7 @@ function hyperform(form) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

var classes = _ref.classes;
var classSelector = _ref.classSelector;
var _ref$debug = _ref.debug;
var debug = _ref$debug === undefined ? false : _ref$debug;
var extend_fieldset = _ref.extend_fieldset;
Expand Down Expand Up @@ -2570,7 +2572,7 @@ function hyperform(form) {
}

var settings = { debug: debug, strict: strict, preventImplicitSubmit: preventImplicitSubmit, revalidate: revalidate,
validEvent: validEvent, extendFieldset: extendFieldset, classes: classes };
validEvent: validEvent, extendFieldset: extendFieldset, classes: classes, classSelector: classSelector };

if (form instanceof window.NodeList || form instanceof window.HTMLCollection || form instanceof Array) {
return Array.prototype.map.call(form, function (element) {
Expand Down Expand Up @@ -2643,4 +2645,4 @@ if (document.currentScript && document.currentScript.hasAttribute('data-hf-autol
hyperform(window);
}

module.exports = hyperform;
module.exports = hyperform;
4 changes: 2 additions & 2 deletions dist/hyperform.cjs.min.js
View file

Large diffs are not rendered by default.

26 changes: 14 additions & 12 deletions dist/hyperform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2425,6 +2425,7 @@ var hyperform = (function () {
enumerable: true,
get: function get() {
var wrapper = get_wrapper(this.element);
var classElementTarget = wrapper && typeof wrapper.settings.classSelector === 'function' ? wrapper.settings.classSelector(this.element) : this.element;
var validClass = wrapper && wrapper.settings.classes.valid || 'hf-valid';
var invalidClass = wrapper && wrapper.settings.classes.invalid || 'hf-invalid';
var userInvalidClass = wrapper && wrapper.settings.classes.userInvalid || 'hf-user-invalid';
Expand All @@ -2433,18 +2434,18 @@ var hyperform = (function () {
var outOfRangeClass = wrapper && wrapper.settings.classes.outOfRange || 'hf-out-of-range';
var validatedClass = wrapper && wrapper.settings.classes.validated || 'hf-validated';

this.element.classList.add(validatedClass);
classElementTarget.classList.add(validatedClass);

if (is_validation_candidate(this.element)) {
for (var _prop in validity_state_checkers) {
if (validity_state_checkers[_prop](this.element)) {
this.element.classList.add(invalidClass);
this.element.classList.remove(validClass);
this.element.classList.remove(userValidClass);
classElementTarget.classList.add(invalidClass);
classElementTarget.classList.remove(validClass);
classElementTarget.classList.remove(userValidClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userInvalidClass);
classElementTarget.classList.add(userInvalidClass);
} else {
this.element.classList.remove(userInvalidClass);
classElementTarget.classList.remove(userInvalidClass);
}
this.element.setAttribute('aria-invalid', 'true');
return false;
Expand All @@ -2453,12 +2454,12 @@ var hyperform = (function () {
}

message_store.delete(this.element);
this.element.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
this.element.classList.add(validClass, inRangeClass);
classElementTarget.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
classElementTarget.classList.add(validClass, inRangeClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userValidClass);
classElementTarget.classList.add(userValidClass);
} else {
this.element.classList.remove(userValidClass);
classElementTarget.classList.remove(userValidClass);
}
this.element.setAttribute('aria-invalid', 'false');
return true;
Expand Down Expand Up @@ -2514,6 +2515,7 @@ var hyperform = (function () {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

var classes = _ref.classes;
var classSelector = _ref.classSelector;
var _ref$debug = _ref.debug;
var debug = _ref$debug === undefined ? false : _ref$debug;
var extend_fieldset = _ref.extend_fieldset;
Expand Down Expand Up @@ -2571,7 +2573,7 @@ var hyperform = (function () {
}

var settings = { debug: debug, strict: strict, preventImplicitSubmit: preventImplicitSubmit, revalidate: revalidate,
validEvent: validEvent, extendFieldset: extendFieldset, classes: classes };
validEvent: validEvent, extendFieldset: extendFieldset, classes: classes, classSelector: classSelector };

if (form instanceof window.NodeList || form instanceof window.HTMLCollection || form instanceof Array) {
return Array.prototype.map.call(form, function (element) {
Expand Down Expand Up @@ -2646,4 +2648,4 @@ var hyperform = (function () {

return hyperform;

}());
}());
4 changes: 2 additions & 2 deletions dist/hyperform.min.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/hyperform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function w(name) {
*/
function hyperform(form, {
classes,
classSelector,
debug=false,
extend_fieldset,
extendFieldset,
Expand Down Expand Up @@ -91,7 +92,7 @@ function hyperform(form, {
}

const settings = { debug, strict, preventImplicitSubmit, revalidate,
validEvent, extendFieldset, classes, };
validEvent, extendFieldset, classes, classSelector };

if (form instanceof window.NodeList ||
form instanceof window.HTMLCollection ||
Expand Down
23 changes: 13 additions & 10 deletions src/polyfills/validityState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ Object.defineProperty(ValidityStatePrototype, 'valid', {
enumerable: true,
get: function() {
const wrapper = get_wrapper(this.element);
const classElementTarget = wrapper && typeof wrapper.settings.classSelector === 'function' ?
wrapper.settings.classSelector(this.element) :
this.element;
const validClass = wrapper && wrapper.settings.classes.valid || 'hf-valid';
const invalidClass = wrapper && wrapper.settings.classes.invalid || 'hf-invalid';
const userInvalidClass = wrapper && wrapper.settings.classes.userInvalid || 'hf-user-invalid';
Expand All @@ -74,18 +77,18 @@ Object.defineProperty(ValidityStatePrototype, 'valid', {
const outOfRangeClass = wrapper && wrapper.settings.classes.outOfRange || 'hf-out-of-range';
const validatedClass = wrapper && wrapper.settings.classes.validated || 'hf-validated';

this.element.classList.add(validatedClass);
classElementTarget.classList.add(validatedClass);

if (is_validation_candidate(this.element)) {
for (let prop in validity_state_checkers) {
if (validity_state_checkers[prop](this.element)) {
this.element.classList.add(invalidClass);
this.element.classList.remove(validClass);
this.element.classList.remove(userValidClass);
classElementTarget.classList.add(invalidClass);
classElementTarget.classList.remove(validClass);
classElementTarget.classList.remove(userValidClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userInvalidClass);
classElementTarget.classList.add(userInvalidClass);
} else {
this.element.classList.remove(userInvalidClass);
classElementTarget.classList.remove(userInvalidClass);
}
this.element.setAttribute('aria-invalid', 'true');
return false;
Expand All @@ -94,12 +97,12 @@ Object.defineProperty(ValidityStatePrototype, 'valid', {
}

message_store.delete(this.element);
this.element.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
this.element.classList.add(validClass, inRangeClass);
classElementTarget.classList.remove(invalidClass, userInvalidClass, outOfRangeClass);
classElementTarget.classList.add(validClass, inRangeClass);
if (this.element.value !== this.element.defaultValue) {
this.element.classList.add(userValidClass);
classElementTarget.classList.add(userValidClass);
} else {
this.element.classList.remove(userValidClass);
classElementTarget.classList.remove(userValidClass);
}
this.element.setAttribute('aria-invalid', 'false');
return true;
Expand Down
28 changes: 28 additions & 0 deletions test/functional/test.regressions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,3 +233,31 @@ describe('Issue 49', function() {
});

});

describe('classSelector', function() {
it('allows configuration of the element to which validity classes are added', function() {
var form = document.createElement('form');
var inputWrapper = document.createElement('div');
var input = document.createElement('input');
input.name = 'test';
input.setAttribute('minlength', '3');
inputWrapper.appendChild(input);
form.appendChild(inputWrapper);
document.body.appendChild(form);

var hform = hyperform(form, {
classSelector: function(element) {
return element.parentNode;
}
});
input.value = 'ab';
input.checkValidity();

if (inputWrapper.classList.contains('hf-invalid')) {
throw Error('validity classes should be applied to the element returned by the supplied selector');
}

hform.destroy();
document.body.removeChild(form);
});
});

0 comments on commit 57eb2aa

Please sign in to comment.