ab-formvalidation
Version:
AB-formValidation is a vanilla form validation system based on HTML5 form API.
7 lines • 6.21 kB
JavaScript
!function(t){function i(e){if(s[e])return s[e].exports;var n=s[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}var s={};i.m=t,i.c=s,i.d=function(t,s,e){i.o(t,s)||Object.defineProperty(t,s,{configurable:!1,enumerable:!0,get:e})},i.n=function(t){var s=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(s,"a",s),s},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="",i(i.s=1)}([function(t,i){!function(){function t(t,i){i=i||{bubbles:!1,cancelable:!1,detail:void 0};var s=document.createEvent("CustomEvent");return s.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),s}if("function"==typeof window.CustomEvent)return!1;t.prototype=window.Event.prototype,window.CustomEvent=t}(),window.AB={extend:function(){var t={},i=!1,s=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(i=arguments[0],s++);for(;s<e;s++)!function(s){for(var e in s)Object.prototype.hasOwnProperty.call(s,e)&&(i&&"[object Object]"===Object.prototype.toString.call(s[e])?t[e]=window.AB.extend(!0,t[e],s[e]):t[e]=s[e])}(arguments[s]);return t},isJson:function(t){try{JSON.parse(t)}catch(t){return!1}return!0},plugins:{}}},function(t,i,s){function e(t,i){this.el=t;var s=window.AB.isJson(this.el.getAttribute("data-ab-form-validation"))?JSON.parse(this.el.getAttribute("data-ab-form-validation")):{};if(this.settings=window.AB.extend(!0,n,i,s),this.submitBtn=this.el.querySelector("[data-ab-form-validation-submit]"),this.isValid=this.el.checkValidity(),!this.submitBtn)return void console.warn("The submit button is missing");this._init()}/*!
* AB-formValidation
*/
var n=(s(0),s(2),{classValid:"is-valid",classInvalid:"isnt-valid",classBtnDisabled:"is-disabled",typing:!1,submitDisabled:!0,validations:{badInput:"error: badInput",patternMismatch:"error: patternMismatch",rangeOverflow:"error: rangeOverflow",rangeUnderflow:"error: rangeUnderflow",stepMismatch:"error: stepMismatch",tooLong:"error: tooLong",tooShort:"error: tooShort",typeMismatch:"error: typeMismatch",valueMissing:"error: valueMissing"}});e.prototype={_init:function(){window.abFieldValidation(this.el,this.settings),this.el.setAttribute("novalidate","novalidate"),this.settings.submitDisabled&&!this.isValid&&(this.submitBtn.classList.add(this.settings.classBtnDisabled),this.submitBtn.disabled=!0),this._events()},_events:function(){this.el.addEventListener("submit",this._onSubmit.bind(this))},_onSubmit:function(t){this._update(t);for(var i=this.el.querySelectorAll("[data-ab-field-validation]"),s=0,e=i.length;s<e;s++)i[s].abFieldValidation.checkValidity("submit");var n=new CustomEvent("submit.ab-formvalidation",{detail:{form:this.el,valid:this.isValid}});document.dispatchEvent(n)},checkValidation:function(){this._update()},_update:function(t){t&&!this.isValid&&t.preventDefault(),this.isValid=this.el.checkValidity(),this.isValid?this.setValid():this.setInvalid()},setValid:function(){this.settings.submitDisabled&&(this.submitBtn.classList.remove(this.settings.classBtnDisabled),this.submitBtn.disabled=!1),this.el.classList.remove(this.settings.classInvalid),this.el.classList.add(this.settings.classValid)},setInvalid:function(){this.settings.submitDisabled&&(this.submitBtn.classList.add(this.settings.classBtnDisabled),this.submitBtn.disabled=!0),this.el.classList.add(this.settings.classInvalid),this.el.classList.remove(this.settings.classValid)}},window.abFormValidation=function(t){for(var i=document.querySelectorAll("[data-ab-form-validation]"),s=0,n=i.length;s<n;s++)i[s].abFormValidation||(i[s].abFormValidation=new e(i[s],t))}},function(t,i,s){function e(t,i){this.el=t;var s=window.AB.isJson(this.el.getAttribute("data-ab-field-validation"))?JSON.parse(this.el.getAttribute("data-ab-field-validation")):{};this.settings=window.AB.extend(!0,i,s),this.inputEls=this.el.querySelectorAll("input, select, textarea"),this.inputEl=this.inputEls[0],this.errorEl=this.el.querySelector("[data-ab-field-validation-error]"),this.formEl=this.el.closest("[data-ab-form-validation]"),this.isValid=this.inputEl.validity.valid,this._init()}/*!
* AB-fieldValidation
*/
s(0);e.prototype={_init:function(){this._buildError()._events()},_buildError:function(){if(!this.errorEl)return this;var t=document.createElement("ul"),i="AB-"+Math.random().toString(36);this.errorEl=this.errorEl.appendChild(t),this.errorEl.setAttribute("role","alert"),this.errorEl.id=i;for(var s=0,e=this.inputEls.length;s<e;s++)this.inputEls[s].setAttribute("aria-describedby",i);return this},_events:function(){var t=this;this.settings.typing&&this.inputEl.addEventListener("keyup",t.checkValidity.bind(t));for(var i=0,s=this.inputEls.length;i<s;i++)this.inputEls[i].addEventListener("change",t.checkValidity.bind(t))},checkValidity:function(t){if(this.isValid=this.inputEl.validity.valid,!this.inputEl.willValidate||this.el.closest("[disabled]"))return this;this.isValid?this._setValid():this._setInvalid(t);var i=new CustomEvent("checked.ab-fieldvalidation",{detail:{field:this.el,valid:this.isValid}});document.dispatchEvent(i),"submit"!==t&&this.formEl.abFormValidation.checkValidation()},_setValid:function(){this._updateDom()},_setInvalid:function(t){var i="";if(this.inputEl.validity.customError&&"submit"===t)return this;this.inputEl.setCustomValidity("");for(var s in this.inputEl.validity)"valid"!==s&&"customError"!==s&&this.inputEl.validity[s]&&(i+="<li>"+this.settings.validations[s]+"</li>");this.errorEl&&(this.errorEl.innerHTML=i),this._updateDom()},setCustomError:function(t){this.inputEl.setCustomValidity(t),this.isValid=this.inputEl.validity.valid,this._updateDom(),this.errorEl&&(this.errorEl.innerHTML="<li>"+t+"</li>")},_updateDom:function(){this.inputEl.setAttribute("aria-invalid",!this.isValid),this.isValid?(this.errorEl&&(this.errorEl.innerHTML=""),this.el.classList.add(this.settings.classValid),this.el.classList.remove(this.settings.classInvalid)):(this.el.classList.add(this.settings.classInvalid),this.el.classList.remove(this.settings.classValid))}},window.abFieldValidation=function(t,i){for(var s=t.querySelectorAll("[data-ab-field-validation]"),n=0,a=s.length;n<a;n++)s[n].abFieldValidation||(s[n].abFieldValidation=new e(s[n],i))}}]);