@vkm-js/validation
Version:
An Alpinejs validation that accepts and handles simple Laravel rules and validates in the frontend.
2 lines (1 loc) • 4.11 kB
JavaScript
(()=>{function c(f){f.data("validation",(b={},g=!0)=>({rules:b,showAsTooltip:g,ruleHasAsterisk:function(e){return!!e.includes("*")},validateDropdown(e=null,t=null,i=null){if(!e){console.warn("When validating a dropdown the model attribute cannot be empty!");return}let r=document.getElementById(i);if(this.isValid(r),t)this.isValid(r);else{let s="The field is required.";this.showAsTooltip?r.setAttribute("x-tooltip.danger.show",s):document.getElementById(`error-${i}`)||r.insertAdjacentHTML("beforeend",`<div id="error-${i}" class="invalid-feedback">${s}</div>`)}},validate(){let e=document.body.querySelectorAll('form button[type="submit"]')[0],t=this.$event.target,i=this.$event.target.getAttribute("model")??this.$event.target.getAttribute("name"),r=this.$event.target.value,s=[];try{this.rules=JSON.parse(this.rules)}catch{}if(this.isValid(t),s=this.rules[i],this.ruleHasAsterisk(i)){let n=i.replace(/[0-9]/g,"*");s=this.rules[n]}if(!s||s.includes("nullable")&&(!r||r==0))return;e.classList.add("disabled");let u=s.some(n=>["numeric","integer"].includes(n)),m=u?".":" characters.";for(let n=0;n<s.length;n++){let l=s[n];if(typeof l=="string"){if(Object.hasOwn(this.check,l)&&!this.check[l](r)){this.isInvalid(t,this.messages[l]);break}else if(["min:","max:","lt:","lte:","gt:","gte:"].some(a=>l.includes(a))){let[a,o]=l.split(":");if(!this.check[a](r,o,u)){let d=this.messages[a](o)+m;this.isInvalid(t,d);break}}else if(l.includes("between:")){let[a,o]=l.split(":"),[d,h]=o.split(",");if(!this.check[a](r,[d,h],u)){let p=this.messages[a]([d,h])+m;this.isInvalid(t,p);break}}}}this.isFormValid&&e.classList.remove("disabled")},check:{required:function(e){return!!e},numeric:function(e){return!isNaN(e)},integer:function(e){return Number.isInteger(Number(e))},email:function(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)},alpha:function(e){return/^[a-zA-Z ]+$/.test(e)},alpha_dash:function(e){return/^[a-zA-Z-_]+$/.test(e)},alpha_num:function(e){return/^[a-zA-Z0-9]+$/.test(e)},between:function(e,t,i=!1){return i?Number(e)>Number(t[0])&&Number(e)<Number(t[1]):e.length>Number(t[0])&&e.length<Number(t[1])},min:function(e,t,i=!1){return i?Number(e)>=Number(t):e.length>=Number(t)},max:function(e,t,i=!1){return i?Number(e)<=Number(t):e.length<=Number(t)},gt:function(e,t,i=!1){return i?Number(e)>Number(t):e.length>Number(t)},gte:function(e,t,i=!1){return i?Number(e)>=Number(t):e.length>=Number(t)},lt:function(e,t,i=!1){return i?Number(e)<Number(t):e.length<Number(t)},lte:function(e,t,i=!1){return i?Number(e)<=Number(t):e.length<=Number(t)}},messages:{required:"The field is required.",numeric:"The field must be a number.",integer:"The field must be an integer number.",email:"The field must be a valid email address.",alpha_dash:"The field under validation may contain alphabetic characters, numbers, dashes or underscores.",alpha_num:"The field may only contain letters and numbers.",between:function(e){return`The field must be between ${e[0]} and ${e[1]}`},min:function(e){return`The field must be at least ${e}`},max:function(e){return`The field may not be greater than ${e}`},lt:function(e){return`The field must be less than ${e}`},lte:function(e){return`The field must be less than or equal ${e}`},gt:function(e){return`The field must be must be greater than ${e}`},gte:function(e){return`The field must be must be greater than or equal ${e}`}},isValid:function(e){e.classList.add("is-valid"),e.classList.remove("is-invalid"),setTimeout(function(){e.classList.remove("is-valid")},2e3),this.showAsTooltip&&(e.removeAttribute("x-tooltip.danger.show"),e.removeAttribute("data-tooltip"),document.querySelectorAll(".tooltip").forEach(i=>i.remove()));let t=document.getElementById(`error-${e.id}`);t&&t.remove(),this.isFormValid=!0},isInvalid:function(e,t){e.classList.remove("is-valid"),e.classList.add("is-invalid"),this.showAsTooltip?e.setAttribute("x-tooltip.danger.show",t):document.getElementById(e.id).outerHTML+=`<div id="error-${e.id}" class="invalid-feedback">${t}</div>`,this.isFormValid=!1},isFormValid:!0}))}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(c)});})();