Abide Form validation (Vanilla JS)
A transposition in vanilla js of Foundation Abide form validation library
This library manage all the form elements in order to be WCAG compliant.
npm install vanilla-abide
;const myForm = document;const abideInstance = myForm; myForm;myForm;
Events
event | description |
---|---|
formInvalid |
fired when form validation is not passed |
formValid |
fired when form validation is passed |
Built-in regex validators
alpha : /^[a-zA-Z]+$/alpha_numeric : /^[a-zA-Z0-9]+$/integer : /^[-+]?\d+$/number : /^[-+]?\d*?$/ // amex, visa, dinerscard : /^$/cvv : /^{3,4}$/ // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-addressemail : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9]?+$/ // From CommonRegexJS (@talyssonoc)// https://github.com/talyssonoc/CommonRegexJS/blob/e2901b9f57222bc14069dc8f0598d5f412555411/lib/commonregex.js#L76// For more restrictive URL Regexs, see https://mathiasbynens.be/demo/url-regex.url: /^$/ // abc.dedomain : /^+[a-zA-Z]{2,8}$/ datetime : /^\-\-T\:\:$/// YYYY-MM-DDdate : /[0-9]{2}-$/// HH:MM:SStime : /^{2}$/dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/// MM/DD/YYYYmonth_day_year : /^[- \/.][- \/.]\d{4}$/// DD/MM/YYYYday_month_year : /^[- \/.][- \/.]\d{4}$/ /**#f00#ff0000rgb(255,0,0)rgb(100%, 0%, 0%)rgb(300,0,0)rgb(255,-10,0)rgb(110%, 0%, 0%)rgba(255,0,0,1)rgba(100%,0%,0%,1)rgba(0,0,255,0.5)rgba(100%, 50%, 0%, 0.1)hsl(0, 100%, 50%)hsl(120, 100%, 50%)hsl(120, 75%, 75%)hsl(120, 100%, 50%)hsla(120, 100%, 50%, 1)hsla(240, 100%, 50%, 0.5)hsla(30, 100%, 50%, 0.1)#ff00FF00hsla(30, 100%, 50%, .1)*/color : /^$/ // Domain || URLwebsite: { return Abidedefaultspatterns'domain' || Abidedefaultspatterns'url'; }