webform-toolkit
Version:
Create a HTML form with field validation and custom errors.
1 lines • 6.52 kB
JavaScript
;function WebformToolkit(n,p,v){var f=this;function b(e,t){var r=null;switch(t.type){case"color":case"date":case"email":case"hidden":case"number":case"password":case"quantity":case"range":case"submit":case"text":case"time":r=h(t);break;case"file":r=function(e){var t=document.createElement("input");t.setAttribute("type","file"),e.name&&t.setAttribute("name",e.name);return t}(t);break;case"textarea":r=function(e){var t=document.createElement("textarea");t.setAttribute("name",e.name),e.placeholder&&t.setAttribute("placeholder",e.placeholder);return t.required=!!e.required,t}(t);break;case"select":r=function(e){var t=document.createElement("select");t.classList.add("menu"),t.setAttribute("name",e.name);var r=e.filter.split("|"),a=!1;null!=e&&e.value&&(r.unshift(e.value),a=!0);for(var n=0;n<r.length;n++){var i=r[n],l=document.createElement("option");l.textContent=i,a?a=!1:l.setAttribute("value",i),i===e.value&&(l.selected=!0),t.appendChild(l)}return t.required=!!e.required,t}(t);break;case"radio":r=function(e){var t=document.createElement("div");t.classList.add("radios");for(var r=e.filter.split("|"),a=0;a<r.length;a++){var n=r[a],i=document.createElement("input");i.setAttribute("type","radio"),i.setAttribute("name",e.name),i.setAttribute("value",n),n===e.value&&(i.checked=!0);var l=document.createElement("span");l.textContent=n,t.appendChild(i),t.appendChild(l)}return t}(t);break;case"checkbox":r=function(e){var t=document.createElement("div");t.classList.add("checkbox");var r=document.createElement("span");r.textContent=e.label;var a=document.createElement("input");a.setAttribute("type","checkbox"),a.setAttribute("name",e.name),a.setAttribute("value",e.value),e.value&&(a.checked=!0);return a.required=!!e.required,t.appendChild(a),t.appendChild(r),t}(t);break;default:throw new Error("Invalid field type: "+t.type)}if((null==t?void 0:t.id)&&r.setAttribute("id",t.id),"hidden"===t.type||"submit"===t.type)return r;var a=document.createElement("div");if("checkbox"!==t.type){var n=document.createElement("label");if(n.setAttribute("for",t.id),t.required){var i=document.createElement("span");i.classList.add("required"),n.appendChild(i)}n.textContent=t.label,a.appendChild(n)}if(null!=t&&t.filter){r.regex=t.filter,r.message=t.error,r.error=!1;var l=function(){(function(t){var e=null==t?void 0:t.value;if(!e)return;var r=t.regex,a=t.error,n=t.message,i=new RegExp(r,"g"),l=!1;switch(t.tagName){case"INPUT":case"SELECT":case"TEXTAREA":l=i.test(e)}var u=t.parentNode,d=u.querySelector("label"),o="error-"+t.id,s=document.getElementById(o)||document.createElement("p");!1===l&&!1===a?(d.setAttribute("aria-invalid","true"),s.classList.add("error-message"),s.setAttribute("id",o),s.setAttribute("aria-invalid","true"),s.textContent=n,u.appendChild(s),t.classList.add("error-on"),t.setAttribute("aria-describedBy",o),t.setAttribute("aria-invalid","true"),t.error=!0,s.style.display="block",s.style.opacity=0,function e(){var t=parseFloat(s.style.opacity);1<(t+=.1)==!1&&(s.style.opacity=t,window.requestAnimationFrame(e))}()):!0===l&&!0===a&&(t.error=!1,function e(){(s.style.opacity-=.1)<.1?(d.removeAttribute("aria-invalid"),t.classList.remove("error-on"),t.removeAttribute("aria-describedBy"),t.removeAttribute("aria-invalid"),s.style.display="none",s.remove()):window.requestAnimationFrame(e)}())})(this),d(e)};"select"===t.type?r.addEventListener("change",l):(r.addEventListener("focusout",l),r.addEventListener("keypress",l),r.addEventListener("keyup",l),r.addEventListener("mouseout",l))}if(a.appendChild(r),null!=t&&t.description){var u=document.createElement("p");u.classList.add("description"),u.setAttribute("role","info"),u.innerHTML=function(e){void 0===e&&(e="");return e.replace(/\*\*(.*)\*\*/g,"<strong>$1</strong>").replace(/\*(.*)\*/g,"<em>$1</em>").replace(/\[([^()]+)\]\(([^()]+)\)/g,'<a href="$2">$1</a>')}(function(e){return(new DOMParser).parseFromString(e,"text/html").body.textContent||""}(t.description)),a.appendChild(u)}return a}function h(e){var t=document.createElement("input");return e.type&&t.setAttribute("type",e.type),e.name&&t.setAttribute("name",e.name),e.value&&t.setAttribute("value",e.value),null==e||!e.maxlength||"password"!==e.type&&"text"!==e.type||t.setAttribute("maxlength",e.maxlength),(null!=e&&e.max||null!=e&&e.min||null!=e&&e.step&&("number"===e.type||"quantity"===e.type))&&(t.setAttribute("max",e.max),t.setAttribute("min",e.min),"step"===e.type&&t.setAttribute("step",e.step)),null!=e&&e.placeholder&&t.setAttribute("placeholder",e.placeholder),t.required=!!e.required,t}function d(e){var t=e.querySelector('input[type="submit"]');if(!t)throw new Error("Failed to change submit state (missing field)");t.disabled=y(e)}function y(e){for(var t=e.querySelectorAll("input, select, textarea"),r=0;r<t.length;r++){var a=t[r];if(("INPUT"!==a.tagName||/text|password|radio|checkbox/.test(a.type))&&(null!=a&&a.required&&(!a.value||(null==a?void 0:a.selectedIndex)<=0)||a.error))return!0}}return function(){var e=p.action,t=p.groups;if(!e||!t.length)throw new Error("Failed to initialize (missing settings)");!function(){var e=function(){var t=document.createElement("form");t.classList.add("webform"),null!=p&&p.action&&(t.setAttribute("method","POST"),t.setAttribute("enctype","multipart/form-data"),t.setAttribute("action",p.action));if(null!=p&&p.params)for(var e=p.params.split("&"),r=0;r<e.length;r++){var a=e[r].split("="),n=h({type:"hidden",name:a[0],value:a[1]});t.appendChild(n)}for(var i=0;i<p.groups.length;i++){var l=p.groups[i],u=document.createElement("fieldset");if(u.classList.add("field-group"+i),l.legend){var d=document.createElement("legend");d.textContent=l.legend,u.appendChild(d)}for(var o=0;o<l.fields.length;o++){var s=b(t,l.fields[o]);u.appendChild(s)}t.appendChild(u)}if(!1!==(null==p?void 0:p.submit)){var c=document.createElement("div");c.classList.add("form-submit");var m=document.createElement("input");m.setAttribute("type","submit"),m.setAttribute("value","Submit"),c.appendChild(m),t.appendChild(c)}return t.addEventListener("submit",function(e){e.preventDefault(),y(t)||("function"==typeof v?v(Object.fromEntries(new FormData(t))):f.submit())}),t}();n.appendChild(e),d(e)}()}(),f.create=function(e,t){var r=n.querySelector("form"),a=b(r,e);if(!r||!a||"function"!=typeof t)throw new Error("Failed to create field: "+a.name+" (malformed config)");t(r,a)},f}window.webformToolkit=function(e,t,r){return new WebformToolkit(e,t,r)},"undefined"!=typeof module&&module.exports&&(module.exports=WebformToolkit);