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

updated parseField workflow

Browse Source
This commit is contained in:
Dan Remollino
2025-04-05 16:33:24 -04:00
parent 4e216a197f
commit 80fe8e6247
3 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -106,7 +106,7 @@
<legend>Custom Form Controls</legend>
<figure class="form-group">
<label for="custom-control">Custom Form Control</label>
<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;">
@ -115,11 +115,12 @@
</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>
<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=&quot;https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg&quot; alt=&quot;Ya good.&quot; />')">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>
@ -128,21 +129,21 @@
<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>
<label for="not-required">Text (Optional)</label>
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
<figcaption>Exclude fields.</figcaption>
<figcaption>Optional fields will allow a blank input.</figcaption>
</figure>
<figure class="form-group">
<label for="not-required-email">Email (Not Required)</label>
<label for="not-required-email">Email (Optional)</label>
<input data-validation='{"optional": true}' id="not-required-email" type="email" name="not_required_email">
<figcaption>Exclude fields.</figcaption>
<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.</figcaption>
<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">