From 892a378392b408569d715478609b8c0d98f923de Mon Sep 17 00:00:00 2001 From: natrayanp <31285863+natrayanp@users.noreply.github.com> Date: Fri, 11 Dec 2020 17:22:32 +0800 Subject: [PATCH 1/2] Update pristine.js Avoid validation to call immediately after Reset in Live = true mode --- src/pristine.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pristine.js b/src/pristine.js index 6fd296a..edd0680 100755 --- a/src/pristine.js +++ b/src/pristine.js @@ -41,7 +41,8 @@ _('equals', { fn: (val, otherFieldSelector) => { let other = document.querySelec export default function Pristine(form, config, live){ let self = this; - + let isreset = false; + init(form, config, live); function init(form, config, live){ @@ -107,6 +108,8 @@ export default function Pristine(form, config, live){ * @returns {boolean} return true when valid false otherwise */ self.validate = function(input, silent){ + if(isreset) {isreset=false; return;} + silent = (input && silent === true) || input === true; let fields = self.fields; if (input !== true && input !== false){ @@ -300,7 +303,7 @@ export default function Pristine(form, config, live){ elem.classList.remove(self.config.successClass); elem.classList.remove(self.config.errorClass); }); - + isreset = true; }; /*** From 0604cd65b9ed8f1574131244626dc56f23e50b6d Mon Sep 17 00:00:00 2001 From: natrayanp <31285863+natrayanp@users.noreply.github.com> Date: Fri, 11 Dec 2020 17:56:50 +0800 Subject: [PATCH 2/2] Update pristine.js 1) Variable "isreset" to avoid immediate call to validate function after Rest. This is useful in scenarios where we have Clear buttons. 2) This is to have multiple classes in config for errorClass & successClass instead of having only single classes in them. Example: let defaultConfig = { errorClass: 'text-sm text-red-500', //Styled using tailwind CSS successClass:'text-sm text-gray-500', ........ }; --- src/pristine.js | 45 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/src/pristine.js b/src/pristine.js index edd0680..5bff4d9 100755 --- a/src/pristine.js +++ b/src/pristine.js @@ -249,8 +249,15 @@ export default function Pristine(form, config, live){ let errorClassElement = errorElements[0], errorTextElement = errorElements[1]; if(errorClassElement){ - errorClassElement.classList.remove(self.config.successClass); - errorClassElement.classList.add(self.config.errorClass); + //errorClassElement.classList.remove(self.config.successClass); + //errorClassElement.classList.add(self.config.errorClass); + + let errCls = createClassarray(self.config.errorClass); + let sucCls = createClassarray(self.config.successClass); + if(sucCls.length) {sucCls.forEach((s) => errorClassElement.classList.remove(s))}; + if(errCls.length) {errCls.forEach((e) => errorClassElement.classList.add(e))}; + + } if (errorTextElement){ errorTextElement.innerHTML = field.errors.join('
'); @@ -274,8 +281,12 @@ export default function Pristine(form, config, live){ let errorClassElement = errorElements[0], errorTextElement = errorElements[1]; if (errorClassElement){ // IE > 9 doesn't support multiple class removal - errorClassElement.classList.remove(self.config.errorClass); - errorClassElement.classList.remove(self.config.successClass); + //errorClassElement.classList.remove(self.config.errorClass); + //errorClassElement.classList.remove(self.config.successClass); + let errCls = createClassarray(self.config.errorClass); + let sucCls = createClassarray(self.config.successClass); + if(errCls.length) {errCls.forEach((e) => errorClassElement.classList.remove(e))}; + if(sucCls.length) {sucCls.forEach((s) => errorClassElement.classList.remove(s))}; } if (errorTextElement){ errorTextElement.innerHTML = ''; @@ -285,8 +296,10 @@ export default function Pristine(form, config, live){ } function _showSuccess(field){ - let errorClassElement = _removeError(field)[0]; - errorClassElement && errorClassElement.classList.add(self.config.successClass); + let errorClassElement = _removeError(field)[0]; + //errorClassElement && errorClassElement.classList.add(self.config.successClass); + let sucCls = createClassarray(self.config.successClass); + if(sucCls.length) {errorClassElement && sucCls.forEach((s) => errorClassElement.classList.add(s))}; } /*** @@ -300,12 +313,28 @@ export default function Pristine(form, config, live){ elem.parentNode.removeChild(elem); }); Array.from(self.form.querySelectorAll('.' + self.config.classTo)).map(function (elem) { - elem.classList.remove(self.config.successClass); - elem.classList.remove(self.config.errorClass); + // elem.classList.remove(self.config.successClass); + // elem.classList.remove(self.config.errorClass); + let errCls = createClassarray(self.config.errorClass); + let sucCls = createClassarray(self.config.successClass); + if(errCls.length) { sucCls.forEach((s) => elem.classList.remove(s)) }; + if(errCls.length) { errCls.forEach((e) => elem.classList.remove(e)) }; }); isreset = true; }; + + /*** + * Convert the multipl Classes into an array and remove spaces + * if the classstring is empty array + */ + function createClassarray(classstring){ + let cls = classstring.split(" ").filter(e => e); + if (cls.length) return cls; + return ([]); + } + + /*** * Resets the errors and deletes all pristine fields */