updated demo
This commit is contained in:
266
index.html
266
index.html
@ -10,160 +10,160 @@
|
||||
</head>
|
||||
|
||||
<body class="no-transition">
|
||||
<header>
|
||||
<h1>Form Validation</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<div style="background: var(--color-02);">
|
||||
<form data-validation='{"onSuccess": "save()"}'>
|
||||
<fieldset>
|
||||
<legend>Native HTML Form Controls</legend>
|
||||
<form data-validation='{"onSuccess": "save()"}'>
|
||||
<fieldset>
|
||||
<legend>Native HTML Form Controls</legend>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="text">Text</label>
|
||||
<input id="text" type="text" name="text">
|
||||
<figcaption>Input element with <code>type="text"</code> attribute.</figcaption>
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="text">Text</label>
|
||||
<input id="text" type="text" name="text">
|
||||
<figcaption>Input element with <code>type="text"</code> attribute.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email">
|
||||
<figcaption>Input element with <code>type="email"</code> attribute.</figcaption>
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email">
|
||||
<figcaption>Input element with <code>type="email"</code> attribute.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="tel">Tel</label>
|
||||
<input id="tel" type="tel" name="tel">
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="tel">Tel</label>
|
||||
<input id="tel" type="tel" name="tel">
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="date">Date</label>
|
||||
<input id="date" type="date" name="date" min="2025-01-01" max="2025-12-31">
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="date">Date</label>
|
||||
<input id="date" type="date" name="date" min="2025-01-01" max="2025-12-31">
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="file">File Upload</label>
|
||||
<input id="file" type="file" name="file">
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="file">File Upload</label>
|
||||
<input id="file" type="file" name="file">
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="select">Select</label>
|
||||
<select id="select" name="select">
|
||||
<option selected value="">Choose an Item</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
</select>
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="select">Select</label>
|
||||
<select id="select" name="select">
|
||||
<option selected value="">Choose an Item</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
</select>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<fieldset class="form-group">
|
||||
<legend>Check Group</legend>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-1" type="checkbox" name="checks">
|
||||
<label for="checkbox-1">Checkbox 1</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-2" type="checkbox" name="checks">
|
||||
<label for="checkbox-2">Checkbox 2</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-3" type="checkbox" name="checks">
|
||||
<label for="checkbox-3">Checkbox 3</label>
|
||||
</span>
|
||||
</fieldset>
|
||||
</figure>
|
||||
<figure>
|
||||
<fieldset class="form-group">
|
||||
<legend>Check Group</legend>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-1" type="checkbox" name="checks">
|
||||
<label for="checkbox-1">Checkbox 1</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-2" type="checkbox" name="checks">
|
||||
<label for="checkbox-2">Checkbox 2</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-3" type="checkbox" name="checks">
|
||||
<label for="checkbox-3">Checkbox 3</label>
|
||||
</span>
|
||||
</fieldset>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<fieldset class="form-group">
|
||||
<legend>Radio Group</legend>
|
||||
<span class="form-group__item">
|
||||
<input id="radio-1" type="radio" name="radios">
|
||||
<label for="radio-1">Radio 1</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="radio-2" type="radio" name="radios">
|
||||
<label for="radio-2">Radio 2</label>
|
||||
</span>
|
||||
</fieldset>
|
||||
</figure>
|
||||
<figure>
|
||||
<fieldset class="form-group">
|
||||
<legend>Radio Group</legend>
|
||||
<span class="form-group__item">
|
||||
<input id="radio-1" type="radio" name="radios">
|
||||
<label for="radio-1">Radio 1</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="radio-2" type="radio" name="radios">
|
||||
<label for="radio-2">Radio 2</label>
|
||||
</span>
|
||||
</fieldset>
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="textarea">Textarea</label>
|
||||
<textarea id="textarea" name="textarea"></textarea>
|
||||
</figure>
|
||||
</fieldset>
|
||||
<figure class="form-group">
|
||||
<label for="textarea">Textarea</label>
|
||||
<textarea id="textarea" name="textarea"></textarea>
|
||||
</figure>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Passwords</legend>
|
||||
<p style="grid-column: -1 / 1;">The Password Confirm field below is automatically generated based on the presence of a Password field.</p>
|
||||
<fieldset>
|
||||
<legend>Passwords</legend>
|
||||
<p style="grid-column: -1 / 1;">The Password Confirm field below is automatically generated based on the presence of a Password field.</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" name="password">
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" name="password">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Custom Form Controls</legend>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="custom-control">Check for Text</label>
|
||||
<div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
|
||||
class="custom-form-control" id="custom-control" name="custom_control" contenteditable>
|
||||
</div>
|
||||
</fieldset>
|
||||
<figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption>
|
||||
</figure>
|
||||
|
||||
<fieldset>
|
||||
<legend>Custom Form Controls</legend>
|
||||
<figure class="form-group">
|
||||
<label for="exists">Check for Element</label>
|
||||
<div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists" class="custom-form-control"
|
||||
style="display: flex; height: 3lh; justify-content: center; padding: var(--half-space); overflow: clip;" ></div>
|
||||
<button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src="https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg" alt="Ya good." />')">Add an Image</button>
|
||||
<button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Images</button>
|
||||
<figcaption>This custom form control checks if a the <code>div#exists</code> contains an <code>img</code> tag.</figcaption>
|
||||
</figure>
|
||||
</fieldset>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="custom-control">Check for Text</label>
|
||||
<div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
|
||||
id="custom-control" name="custom_control" contenteditable
|
||||
style="background: green;">
|
||||
</div>
|
||||
<figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption>
|
||||
</figure>
|
||||
<fieldset>
|
||||
<legend>Other Options</legend>
|
||||
<p style="grid-column: -1 / 1;">These options can be applied to the fields above.</p>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="exists">Check for Element</label>
|
||||
<div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists"
|
||||
style="border: 1px solid var(--color-01); display: flex; height: 3lh; justify-content: center; padding: var(--half-space); overflow: clip;" ></div>
|
||||
<button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src="https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg" alt="Ya good." />')">Add an Image</button>
|
||||
<button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Images</button>
|
||||
<figcaption>This custom form control checks if a the <code>div#exists</code> contains an <code>img</code> tag.</figcaption>
|
||||
</figure>
|
||||
</fieldset>
|
||||
<figure class="form-group">
|
||||
<label for="not-required">Text (Optional)</label>
|
||||
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
|
||||
<figcaption>Optional fields will allow blank input, but will validate non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
|
||||
</figure>
|
||||
|
||||
<fieldset>
|
||||
<legend>Other Options</legend>
|
||||
<p style="grid-column: -1 / 1;">These options can be applied to the fields above.</p>
|
||||
<figure class="form-group">
|
||||
<label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small>
|
||||
<input data-validation='{"pattern": "^[0-9]*$", "patternMessage": "This field must only contain numbers."}' id="custom" type="text" inputmode="numeric" name="custom">
|
||||
<figcaption>This field uses a user supplied regular expression to test against and can output a custom error message. The input will validate based on the input's type attribute first, then the pattern.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="not-required">Text (Optional)</label>
|
||||
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
|
||||
<figcaption>Optional fields will allow a blank input.</figcaption>
|
||||
</figure>
|
||||
<figure class="form-group">
|
||||
<label for="disabled">Dynamic Disabling</label>
|
||||
<input id="disabled" type="text" name="disabled" disabled>
|
||||
<button type="button" onclick="document.querySelector('#disabled').toggleAttribute('disabled')">Toggle Disabled Attribute</button>
|
||||
<figcaption>Required fields can be dynamically disabled/enabled.</figcaption>
|
||||
</figure>
|
||||
</fieldset>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="not-required-email">Email (Optional)</label>
|
||||
<input data-validation='{"optional": true}' id="not-required-email" type="email" name="not_required_email">
|
||||
<figcaption>Optional fields will still be validated when there is input present.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small>
|
||||
<input data-validation='{"pattern": "^[0-9]*$", "patternMessage": "This field must only contain numbers."}' id="custom" type="text" inputmode="numeric" name="custom">
|
||||
<figcaption>This field uses a user supplied regular expression to test against and can output a custom error message. The value of the field will be run against all default validation checks, then run against the pattern.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="form-group">
|
||||
<label for="disabled">Dynamic Disabling</label>
|
||||
<input id="disabled" type="text" name="disabled" disabled>
|
||||
<button type="button" onclick="document.querySelector('#disabled').toggleAttribute('disabled')">Toggle Disabled Attribute</button>
|
||||
<figcaption>Required fields can be dynamically disabled/enabled.</figcaption>
|
||||
</figure>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<figure class="form-group">
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</figure>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<fieldset>
|
||||
<figure class="form-group">
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</figure>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="align-center">
|
||||
<a href="https://git.danremollino.dev/danremollino/form-validation">
|
||||
<img src="https://git.danremollino.dev/assets/img/logo.svg" alt="Repository on Gitea" />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user