danremollino/form-validation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

added demo site

Browse Source
This commit is contained in:
Dan Remollino
2025-04-03 17:45:27 -04:00
parent 3a0ad9d804
commit 50af7ae33a
15 changed files with 1732 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
demo/index.html Normal file
View File

@ -0,0 +1,144 @@
<!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="./js/main.js" defer></script>
</head>
<body class="no-transition">
<main>
<section>
<div style="background: var(--color-02);">
<form data-validation='{"onSuccess": "save()"}'>
<fieldset>
<legend>Form Validation</legend>
<div class="form-group">
<label for="exists">Custom Form Control</label>
<div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists"></div>
</div>
<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="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="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.</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="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="password">Password</label>
<input id="password" type="password" name="password">
<figcaption>Input element with <code>type="password"</code> attribute. The 'Password Confirm' field is auto-generated.</figcaption>
</figure>
<figure class="form-group">
<label for="not-required">Not Required</label>
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
<figcaption>Exclude fields.</figcaption>
</figure>
<figure class="form-group">
<label for="custom-control">Custom Form Control</label>
<div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
id="custom-control" name="custom_control" contenteditable
style="background: green;">
</div>
<figcaption>This field is a <code>div</code> element, not an <code>input</code> element.</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>Fields can be dynamically disabled/enabled.</figcaption>
</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>
<figure class="form-group">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</figure>
</fieldset>
</form>
</div>
</section>
</main>
</body>
</html>