@manufosela/automatic-form-validation
Automatic HTML form validation using data-* attributes, dependency-free and browser-focused.
Demo code (CodePen-ready HTML, CSS, JS)
HTML (html)
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<main>
<div class="container demo-shell">
<section class="demo-section">
<div class="demo-card">
<span class="badge">Basics</span>
<h2>Basic form</h2>
<p class="note">Required fields, email validation, and submit checks.</p>
<form id="basicForm" class="demo-form" data-validate="true" data-checkrealtime="true">
<div>
<label for="basic-name">Name</label>
<input
id="basic-name"
name="basic-name"
type="text"
placeholder="Jane Doe"
data-required="true"
data-tovalidate="alpha"
/>
</div>
<div>
<label for="basic-email">Email</label>
<input
id="basic-email"
name="basic-email"
type="text"
placeholder="jane@example.com"
data-required="true"
data-tovalidate="email"
/>
</div>
<label>
<input id="basic-accept" name="basic-accept" type="checkbox" data-required="true" />
Accept terms
</label>
<button id="basic-submit" type="submit" data-checkform="true">Submit</button>
</form>
</div>
<div class="demo-card">
<h3>Code</h3>
<details class="code-details">
<summary>Show HTML + JS</summary>
<div class="code-block"><pre><code data-code="basic"></code></pre></div>
</details>
</div>
</section>
<section class="demo-section">
<div class="demo-card">
<span class="badge">Realtime</span>
<h2>Realtime validation</h2>
<p class="note">Fields validate on blur for quick feedback.</p>
<form id="realtimeForm" class="demo-form" data-validate="true" data-checkrealtime="true">
<div>
<label for="realtime-username">Username</label>
<input
id="realtime-username"
name="realtime-username"
type="text"
placeholder="alpha only"
data-required="true"
data-tovalidate="alpha"
/>
</div>
<div>
<label for="realtime-phone">Telephone</label>
<input
id="realtime-phone"
name="realtime-phone"
type="text"
placeholder="6xx xxx xxx"
data-required="true"
data-tovalidate="telephone"
/>
</div>
<button id="realtime-submit" type="submit" data-checkform="true">Submit</button>
</form>
</div>
<div class="demo-card">
<h3>Code</h3>
<details class="code-details">
<summary>Show HTML + JS</summary>
<div class="code-block"><pre><code data-code="realtime"></code></pre></div>
</details>
</div>
</section>
<section class="demo-section">
<div class="demo-card">
<span class="badge">Custom</span>
<h2>Custom validators</h2>
<p class="note">Combine fn: callbacks with runtime validators.</p>
<form id="customForm" class="demo-form" data-validate="true">
<div>
<label for="custom-even">Even number</label>
<input
id="custom-even"
name="custom-even"
type="text"
data-required="true"
data-tovalidate="fn:isEven"
placeholder="Only even numbers"
/>
</div>
<div>
<label for="custom-starts">Starts with M</label>
<input
id="custom-starts"
name="custom-starts"
type="text"
data-required="true"
data-tovalidate="startsWithM"
placeholder="Type a value"
/>
</div>
<button id="custom-submit" type="submit" data-checkform="true">Submit</button>
</form>
</div>
<div class="demo-card">
<h3>Code</h3>
<details class="code-details">
<summary>Show HTML + JS</summary>
<div class="code-block"><pre><code data-code="custom"></code></pre></div>
</details>
</div>
</section>
<section class="demo-section">
<div class="demo-card">
<span class="badge">Logic</span>
<h2>Conditional fields</h2>
<p class="note">Show and validate sections based on selections.</p>
<form id="conditionalForm" class="demo-form" data-validate="true">
<div>
<label id="label_hasphone" data-name="hasphone">Do you have a phone?</label>
<label>
<input
id="conditional-no"
name="hasphone"
type="radio"
data-required="true"
value="no"
/>
No
</label>
<label>
<input
id="conditional-yes"
name="hasphone"
type="radio"
data-required="true"
value="yes"
/>
Yes
</label>
</div>
<fieldset data-activate="conditional-yes" data-deactivate="conditional-no">
<label for="conditional-phone">Phone number</label>
<input
id="conditional-phone"
name="conditional-phone"
data-type="hiddenON"
type="text"
data-required="true"
data-tovalidate="telephone"
placeholder="Your phone"
/>
</fieldset>
<button id="conditional-submit" type="submit" data-checkform="true">Submit</button>
</form>
</div>
<div class="demo-card">
<h3>Code</h3>
<details class="code-details">
<summary>Show HTML + JS</summary>
<div class="code-block"><pre><code data-code="conditional"></code></pre></div>
</details>
</div>
</section>
<section class="demo-section">
<div class="demo-card">
<span class="badge">Groups</span>
<h2>Checkbox groups</h2>
<p class="note">Validate min and max selections for grouped checkboxes.</p>
<form id="groupForm" class="demo-form" data-validate="true">
<label data-type="checkbox-group" data-min="2" data-max="3" data-error-msg="Pick 2 or 3 options">
Select 2 or 3 options
</label>
<label><input type="checkbox" name="group-opt" value="a" /> Option A</label>
<label><input type="checkbox" name="group-opt" value="b" /> Option B</label>
<label><input type="checkbox" name="group-opt" value="c" /> Option C</label>
<label><input type="checkbox" name="group-opt" value="d" /> Option D</label>
<button id="group-submit" type="submit" data-checkform="true">Submit</button>
</form>
</div>
<div class="demo-card">
<h3>Code</h3>
<details class="code-details">
<summary>Show HTML + JS</summary>
<div class="code-block"><pre><code data-code="group"></code></pre></div>
</details>
</div>
</section>
<section class="demo-section">
<div class="demo-card">
<span class="badge">Advanced</span>
<h2>Advanced form</h2>
<p class="note">Combine radio groups, conditional fields, and fn validators.</p>
<form id="advancedForm" class="demo-form" data-validate="true" data-checkrealtime="true">
<div>
<label for="advanced-name">Your name</label>
<input
id="advanced-name"
name="advanced-name"
type="text"
placeholder="type your name"
data-required="true"
data-tovalidate="alfa"
/>
</div>
<div>
<label for="advanced-mobile">Mobile number</label>
<input
id="advanced-mobile"
name="advanced-mobile"
maxlength="9"
type="text"
placeholder="type your mobile number"
data-required="true"
data-tovalidate="movil"
/>
</div>
<div>
<label for="advanced-email">Email</label>
<input
id="advanced-email"
name="advanced-email"
type="text"
placeholder="type your email"
data-required="true"
data-tovalidate="email"
/>
</div>
<div>
<input id="advanced-accept" name="advanced-accept" type="checkbox" data-required="true" />
<span>Accept conditions</span>
</div>
<div>
<label for="advanced-odd">Type an odd value:</label>
<input
id="advanced-odd"
name="advanced-odd"
type="text"
data-required="true"
data-tovalidate="fn:checkOdd"
/>
</div>
<div>
<label id="label_hasphone_advanced" data-name="hasphone-advanced">Do you have a phone number?</label>
<label>
<input
id="advanced-no"
name="hasphone-advanced"
type="radio"
data-required="true"
value="nophone"
/>
No
</label>
<label>
<input
id="advanced-yes"
name="hasphone-advanced"
type="radio"
data-required="true"
value="yesphone"
/>
Yes
</label>
</div>
<fieldset data-activate="advanced-yes" data-deactivate="advanced-no">
<label for="advanced-phone">Phone number</label>
<input
id="advanced-phone"
name="advanced-phone"
data-type="hiddenON"
type="text"
data-required="true"
data-tovalidate="telephone"
placeholder="Your telephone number"
/>
</fieldset>
<button id="advanced-submit" type="submit" data-checkform="true">Submit</button>
</form>
</div>
<div class="demo-card">
<h3>Code</h3>
<details class="code-details">
<summary>Show HTML + JS</summary>
<div class="code-block"><pre><code data-code="advanced"></code></pre></div>
</details>
</div>
</section>
</div>
</main>
<template id="snippet-basic">
<form data-validate="true" data-checkrealtime="true">
<input data-required="true" data-tovalidate="alpha" />
<input data-required="true" data-tovalidate="email" />
<input type="checkbox" data-required="true" />
<button type="submit" data-checkform="true">Submit</button>
</form>
</template>
<template id="snippet-realtime">
<form data-validate="true" data-checkrealtime="true">
<input data-required="true" data-tovalidate="alpha" />
<input data-required="true" data-tovalidate="telephone" />
</form>
</template>
<template id="snippet-custom">
<input data-tovalidate="fn:isEven" />
<input data-tovalidate="startsWithM" />
</template>
<template id="snippet-conditional">
<label data-name="hasphone">Do you have a phone?</label>
<input id="hasphoneYES" name="hasphone" type="radio" />
<fieldset data-activate="hasphoneYES" data-deactivate="hasphoneNO">
<input data-type="hiddenON" data-required="true" data-tovalidate="telephone" />
</fieldset>
</template>
<template id="snippet-group">
<label data-type="checkbox-group" data-min="2" data-max="3">
Select 2 or 3 options
</label>
</template>
<template id="snippet-advanced">
<form data-validate="true" data-checkrealtime="true">
<input data-required="true" data-tovalidate="email" />
<input data-tovalidate="fn:checkOdd" />
</form>
</template>CSS (css)
:root {
--bg: #0c0f14;
--bg-elevated: #141923;
--bg-panel: #171d28;
--border: #262f3f;
--text: #f4f6fb;
--text-muted: #a7b0c2;
--text-dim: #7d879b;
--accent: #ff8a3d;
--accent-strong: #ff6a00;
--accent-soft: rgba(255, 138, 61, 0.16);
--shadow: 0 20px 50px rgba(5, 8, 14, 0.45);
--radius-lg: 22px;
--radius-md: 14px;
--radius-sm: 10px;
--max-width: 1160px;
}
* {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
header {
padding: 32px 24px 16px;
border-bottom: 1px solid var(--line);
}
.container {
max-width: 1100px;
margin: 0 auto;
}
.top-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.top-links a {
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 12px;
color: var(--muted);
font-size: 0.85rem;
transition: border-color 0.2s ease, color 0.2s ease;
}
.top-links a:hover {
color: var(--text);
border-color: var(--accent-2);
}
.hero h1 {
margin: 0;
font-size: clamp(28px, 4vw, 44px);
letter-spacing: -0.02em;
}
.hero p {
margin: 8px 0 0;
color: var(--muted);
}
main {
padding: 24px 24px 64px;
}
.grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 18px;
display: grid;
gap: 10px;
}
.card h3 {
margin: 0;
}
.card p {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
}
.badge {
display: inline-flex;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--muted);
font-size: 0.75rem;
}
.section-title {
font-size: 1.1rem;
margin: 28px 0 14px;
}
.demo-shell {
display: grid;
gap: 20px;
}
.demo-section {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: start;
}
.demo-card {
background: color-mix(in srgb, var(--card) 85%, transparent);
border: 1px solid var(--line);
border-radius: 16px;
padding: 18px;
}
.demo-card h2 {
margin: 0 0 10px;
}
.demo-form {
display: grid;
gap: 12px;
}
.demo-form label {
display: block;
margin-bottom: 6px;
}
.demo-form input[type="text"],
.demo-form input[type="email"] {
width: min(360px, 100%);
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
}
.demo-form button {
width: fit-content;
padding: 8px 16px;
border-radius: 999px;
border: none;
background: linear-gradient(120deg, var(--accent), #ff6a00);
color: #111;
font-weight: 600;
cursor: pointer;
}
.code-block {
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
overflow: auto;
font-size: 0.85rem;
color: var(--code-text);
}
.code-block pre {
margin: 0;
white-space: pre-wrap;
}
.code-details {
display: grid;
gap: 12px;
}
.code-details summary {
cursor: pointer;
color: var(--muted);
}
.code-details[open] summary {
color: var(--text);
}
.playground {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.playground textarea {
width: 100%;
min-height: 240px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--code-bg);
color: var(--code-text);
padding: 12px;
font-family: "JetBrains Mono", "Courier New", monospace;
font-size: 0.85rem;
}
.playground iframe {
width: 100%;
min-height: 320px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surface);
}
.playground-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.playground-actions button {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.playground-actions button.primary {
border: none;
background: linear-gradient(120deg, var(--accent), #ff6a00);
color: #111;
}
.note {
color: var(--muted);
font-size: 0.85rem;
}
:root {
--bg: #0f1117;
--bg-2: #151a26;
--bg-spot-1: #1a2136;
--bg-spot-2: #1d1b34;
--card: #1c2233;
--text: #f3f6ff;
--muted: #b8c0d9;
--line: #2b3247;
--accent: #ffb000;
--accent-2: #00d0ff;
--surface: #0b0f1a;
--code-bg: #0b0f1a;
--code-text: #d6d9e6;
}
:root.light {
--bg: #f5f5f7;
--bg-2: #ffffff;
--bg-spot-1: #f8e9d0;
--bg-spot-2: #e8eef8;
--card: #ffffff;
--text: #1d1d1f;
--muted: #6b7280;
--line: #e5e7eb;
--accent: #ffb000;
--accent-2: #00a7d6;
--surface: #f3f4f6;
--code-bg: #111827;
--code-text: #f9fafb;
}
:root.dark {
--bg: #0f1117;
--bg-2: #151a26;
--bg-spot-1: #1a2136;
--bg-spot-2: #1d1b34;
--card: #1c2233;
--text: #f3f6ff;
--muted: #b8c0d9;
--line: #2b3247;
--accent: #ffb000;
--accent-2: #00d0ff;
--surface: #0b0f1a;
--code-bg: #0b0f1a;
--code-text: #d6d9e6;
}
h1 {
color: var(--accent) !important;
}
.top-links a,
.topbar a {
color: var(--muted) !important;
border-color: var(--line) !important;
}
.top-links a:hover,
.topbar a:hover {
color: var(--text) !important;
}
.card,
.section,
.demo-section,
.panel {
background: var(--card) !important;
border-color: var(--line) !important;
color: var(--text) !important;
}
.code-block,
pre,
code,
.output,
.current-url,
.event-log,
.result-card,
.log {
background: var(--code-bg) !important;
color: var(--code-text) !important;
border-color: var(--line) !important;
}
input,
select,
textarea {
background: var(--surface) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
button {
background: linear-gradient(120deg, var(--accent), #ff6a00) !important;
color: #111 !important;
}
footer {
color: var(--muted) !important;
}
footer a {
color: var(--text) !important;
}JS (js)
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
new ValidateForm();
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
new ValidateForm();
function isEven(value) {
return Number(value) % 2 === 0;
}
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
const validator = new ValidateForm();
validator.addValidator("startsWithM", (value) => value.toLowerCase().startsWith("m"));
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
new ValidateForm();
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
new ValidateForm();
function checkOdd(value) {
return Number(value) % 2 === 1;
}
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
new ValidateForm();
import { ValidateForm } from "https://esm.sh/@manufosela/automatic-form-validation";
const validator = new ValidateForm();
const isEven = (value) => Number(value) % 2 === 0;
globalThis.isEven = isEven;
globalThis.checkOdd = (value) => Number(value) % 2 === 1;
validator.addValidator("startsWithM", (value) => value.toLowerCase().startsWith("m"));
const snippets = {
basic: document.getElementById("snippet-basic"),
realtime: document.getElementById("snippet-realtime"),
custom: document.getElementById("snippet-custom"),
conditional: document.getElementById("snippet-conditional"),
group: document.getElementById("snippet-group"),
advanced: document.getElementById("snippet-advanced"),
};
document.querySelectorAll("[data-code]").forEach((block) => {
const key = block.dataset.code;
if (snippets[key]) {
block.textContent = snippets[key].innerHTML.trim();
}
});
class DemoThemeToggle extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.handleClick = this.handleClick.bind(this);
}
connectedCallback() {
const saved = localStorage.getItem('utils-demo-theme');
document.documentElement.classList.remove('dark');
document.documentElement.classList.toggle('light', saved === 'light');
this.render();
}
render() {
const isLight = document.documentElement.classList.contains('light');
this.shadowRoot.innerHTML = `
<style>
:host {
display: inline-flex;
}
.toggle {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
background: var(--surface);
}
button {
border: none;
background: transparent;
color: var(--muted);
padding: 6px 12px;
font-size: 0.8rem;
cursor: pointer;
font-family: "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
}
button.active {
background: linear-gradient(120deg, var(--accent), #ff6a00);
color: #111;
font-weight: 600;
}
</style>
<div class="toggle" role="group" aria-label="Theme toggle">
<button class="${isLight ? 'active' : ''}" data-theme="light">Light</button>
<button class="${isLight ? '' : 'active'}" data-theme="dark">Dark</button>
</div>
`;
this.shadowRoot.querySelectorAll('button').forEach((btn) => {
btn.addEventListener('click', this.handleClick);
});
}
handleClick(event) {
const theme = event.currentTarget.dataset.theme;
const isLight = theme === 'light';
document.documentElement.classList.toggle('light', isLight);
document.documentElement.classList.remove('dark');
localStorage.setItem('utils-demo-theme', isLight ? 'light' : 'dark');
this.render();
}
}
customElements.define('demo-theme-toggle', DemoThemeToggle);