Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add validity class target selector configuration #59

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+91 −53
Open

Add validity class target selector configuration #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 14 additions & 12 deletions dist/hyperform.amd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2433,6 +2433,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 @@ -2441,18 +2442,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 @@ -2461,12 +2462,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 @@ -2522,6 +2523,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 @@ -2579,7 +2581,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 @@ -2654,4 +2656,4 @@ define(function () { 'use strict';

return hyperform;

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

Large diffs are not rendered by default.

26 changes: 14 additions & 12 deletions dist/hyperform.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2433,6 +2433,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 @@ -2441,18 +2442,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 @@ -2461,12 +2462,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 @@ -2522,6 +2523,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 @@ -2579,7 +2581,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 @@ -2652,4 +2654,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
Open in desktop

Large diffs are not rendered by default.

26 changes: 14 additions & 12 deletions dist/hyperform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2434,6 +2434,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 @@ -2442,18 +2443,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 @@ -2462,12 +2463,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 @@ -2523,6 +2524,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 @@ -2580,7 +2582,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 @@ -2655,4 +2657,4 @@ var hyperform = (function () {

return hyperform;

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

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/hyperform.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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);
});
});