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

17
README.md
View File

@ -1,10 +1,6 @@
# Overview
This class easily adds front-end validation to HTML forms.
# Demo # Demo
A demo of the form validation class can be found [here](https://demos.danremollino.dev/form-validation/). A feature demo can be found [here](https://demos.danremollino.dev/form-validation/).
# Documentation # Documentation
@ -20,10 +16,10 @@ instance.
Once a field is marked invalid, it will always re-validate when its value is Once a field is marked invalid, it will always re-validate when its value is
changed regardless of the [`onlyOnSubmit`](#onlyOnSubmit) value. changed regardless of the [`onlyOnSubmit`](#onlyOnSubmit) value.
> `required` fields are tested for blank first. If this check is passed, the > `required` fields are first tested for blank. If this check is passed, fields
field will then test for [custom rules](#custom-validation) if present. If are then tested based on their `type` attribute value if applicable. (Described
there are no custom rules, some fields are also tested further based on their [below](#markup).) Lastly, the field will test for a user supplied
`type` attribute value. These are described [below](#markup). [pattern](#pattern) if present.
## Required Fields ## Required Fields
@ -450,9 +446,6 @@ copied and added to the field as a native [`pattern`](https://developer.mozilla.
attribute. It is recommended to also provide an error message to display when attribute. It is recommended to also provide an error message to display when
the value does not match `pattern` by providing a [`patternMessage`](#patternmessage). the value does not match `pattern` by providing a [`patternMessage`](#patternmessage).
> The pattern is checked when input is present. A required field will always
first test for blank, then for the provided pattern.
### patternMessage ### patternMessage
**Default:** `null` **Default:** `null`

23
index.html
View File

@ -106,7 +106,7 @@
<legend>Custom Form Controls</legend> <legend>Custom Form Controls</legend>
<figure class="form-group"> <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"]}' <div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
id="custom-control" name="custom_control" contenteditable id="custom-control" name="custom_control" contenteditable
style="background: green;"> style="background: green;">
@ -115,11 +115,12 @@
</figure> </figure>
<figure class="form-group"> <figure class="form-group">
<label for="exists">Custom Form Control</label> <label for="exists">Check for Element</label>
<div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists"></div> <div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists"
<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> 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').innerHTML = ''">Remove Image</button> <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>
<figcaption>This custom form control checks if a the <code>div#exists</code> contains an image.</figcaption> <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> </figure>
</fieldset> </fieldset>
@ -128,21 +129,21 @@
<p style="grid-column: -1 / 1;">These options can be applied to the fields above.</p> <p style="grid-column: -1 / 1;">These options can be applied to the fields above.</p>
<figure class="form-group"> <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"> <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>
<figure class="form-group"> <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"> <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>
<figure class="form-group"> <figure class="form-group">
<label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small> <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"> <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>
<figure class="form-group"> <figure class="form-group">

12
validation.js
View File

@ -263,12 +263,7 @@ class Validation {
parseField(fieldInstance) { parseField(fieldInstance) {
const nameAttrVal = fieldInstance.el.name const nameAttrVal = fieldInstance.el.name
this.validateForBlank(fieldInstance) if (this.validateForBlank(fieldInstance)) {
if (fieldInstance.el.value) {
if (fieldInstance.pattern) {
this.validatePattern(fieldInstance)
} else {
switch (fieldInstance.el.type) { switch (fieldInstance.el.type) {
case 'checkbox': case 'checkbox':
this.validateCheckbox(fieldInstance, nameAttrVal) this.validateCheckbox(fieldInstance, nameAttrVal)
@ -287,6 +282,9 @@ class Validation {
this.validateTel(fieldInstance) this.validateTel(fieldInstance)
break break
} }
if (fieldInstance.pattern && fieldInstance.isValid) {
this.validatePattern(fieldInstance)
} }
} }
} }
@ -297,7 +295,9 @@ class Validation {
fieldInstance, fieldInstance,
(fieldInstance.labelText ? fieldInstance.labelText : `Field`) + ` is required.` (fieldInstance.labelText ? fieldInstance.labelText : `Field`) + ` is required.`
) )
return false
} }
return true
} }
validatePattern(fieldInstance) { validatePattern(fieldInstance) {