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

added dependant fields; fixed disabled fields getting a required indicator on page load

Browse Source
This commit is contained in:
Dan Remollino
2025-04-12 00:54:08 -04:00
parent f842fbf9b9
commit 5f9ab78353
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -132,7 +132,7 @@
<figure class="form-group">
<label for="not-required">Text (Optional)</label>
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
<figcaption>Optional fields will allow blank input, but will validate non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
<figcaption>Optional fields will allow a blank value, but will validate a non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
</figure>
<figure class="form-group">
@ -147,6 +147,18 @@
<button type="button" onclick="document.querySelector('#disabled').toggleAttribute('disabled')">Toggle Disabled Attribute</button>
<figcaption>Required fields can be dynamically disabled/enabled.</figcaption>
</figure>
<figure class="form-group">
<label for="dependant-parent">Dependant Parent</label>
<input id="dependant-parent" type="text" name="dependant_parent">
<figcaption>This field dynamically enables/disables the 'Dependant Child' field if it has a value.</figcaption>
</figure>
<figure class="form-group">
<label for="dependant-child">Dependant Child</label>
<input data-validation='{"dependant": "dependant_parent"}' id="dependant-child" type="text" name="dependant_child">
<figcaption>This field dynamically enables/disables if the 'Dependant Parent' field has a value.</figcaption>
</figure>
</fieldset>
<fieldset>

17
validation.js
View File

@ -1,4 +1,5 @@
class ValidationField {
dependant = null
el = null
formGroupEl = null
isValid = null
@ -95,10 +96,24 @@ class ValidationField {
// add a native pattern attr if pattern property is present
if (this.pattern) this.el.setAttribute('pattern', this.pattern)
// dependant fields
if (this.dependant) {
const parent = this.validationInstance.form.querySelector(`[name=${this.dependant}]`)
const depCheck = () => {
parent.value
? this.el.removeAttribute('disabled')
: this.el.setAttribute('disabled', 'disabled')
}
depCheck()
parent.addEventListener('input', depCheck)
}
// add required indicator
if (this.validationInstance.reqIndicators) {
const hasIndicator = this.formGroupEl?.querySelector(`.${this.validationInstance.reqIndicatorClass}`)
if (!hasIndicator && !this.optional) {
if (!hasIndicator && !this.optional && !this.el.disabled) {
this.labelEl?.insertAdjacentHTML(
'beforeend',
`<span class="${this.validationInstance.reqIndicatorClass}">${this.validationInstance.reqIndicator}</span>`