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
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
@@ -20,10 +16,10 @@ instance.
Once a field is marked invalid, it will always re-validate when its value is
changed regardless of the [`onlyOnSubmit`](#onlyOnSubmit) value.
> `required` fields are tested for blank first. If this check is passed, the
field will then test for [custom rules](#custom-validation) if present. If
there are no custom rules, some fields are also tested further based on their
`type` attribute value. These are described [below](#markup).
> `required` fields are first tested for blank. If this check is passed, fields
are then tested based on their `type` attribute value if applicable. (Described
[below](#markup).) Lastly, the field will test for a user supplied
[pattern](#pattern) if present.
## 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
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
**Default:** `null`

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">

12
validation.js
View File

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