182 lines
10 KiB
HTML
182 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" data-color-scheme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Form Validation</title>
|
|
<link rel="stylesheet" href="../../css/main.css">
|
|
<script src="./validation.js" defer></script>
|
|
</head>
|
|
|
|
<body class="no-transition">
|
|
<header>
|
|
<h1>Form Validation</h1>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<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="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="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="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>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>
|
|
|
|
<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>
|
|
</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>
|
|
<figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption>
|
|
</figure>
|
|
|
|
<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>
|
|
|
|
<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="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 value, but will validate a non-blank value based on the input's type attribute and/or custom pattern if supplied.</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 input will validate based on the input's type attribute first, then 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>
|
|
|
|
<figure class="form-group">
|
|
<label for="dependent-parent">Dependent Parent</label>
|
|
<input id="dependent-parent" type="text" name="dependent_parent">
|
|
<figcaption>This field dynamically enables/disables the 'Dependent Child' field if it has a value.</figcaption>
|
|
</figure>
|
|
|
|
<figure class="form-group">
|
|
<label for="dependent-child">Dependent Child</label>
|
|
<input data-validation='{"dependent": "dependent_parent"}' id="dependent-child" type="text" name="dependent_child">
|
|
<figcaption>This field dynamically enables/disables if the 'Dependent Parent' field has a value.</figcaption>
|
|
</figure>
|
|
</fieldset>
|
|
|
|
<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>
|