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

fixed optional fields not validating while having a value

Browse Source
This commit is contained in:
Dan Remollino
2025-04-04 18:07:59 -04:00
parent 50af7ae33a
commit 4e216a197f
15 changed files with 102 additions and 1656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
index.html Normal file
View File

@ -0,0 +1,168 @@
<!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">
<main>
<section>
<div style="background: var(--color-02);">
<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">Custom Form Control</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>
<figure class="form-group">
<label for="exists">Custom Form Control</label>
<div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists"></div>
<button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src=&quot;https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg&quot; alt=&quot;Ya good.&quot; />')">Add Image</button>
<button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Image</button>
<figcaption>This custom form control checks if a the <code>div#exists</code> contains an image.</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 (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="not-required-email">Email (Not Required)</label>
<input data-validation='{"optional": true}' id="not-required-email" type="email" name="not_required_email">
<figcaption>Exclude fields.</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.</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>
</section>
</main>
</body>
</html>