Form JS

import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"

Password visibility

You can toggle the visibility of a password field.

The <button> must have an aria-controls="IdOfTheInput" and an aria-pressed attributes.

This helper gonna change the type of the input, and it will toggle the aria-pressed attribute of the <button>.

html

<fieldset>
    <legend>Password</legend>
    <div class="group">
        <input id="myPassword" type="password" name="password" value="123456">
        <button id="demoPassword" aria-controls="myPassword" aria-pressed="false" aria-label="Expandable the visibility of the password">
            Show
        </button>
    </div>
</fieldset>

js

import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
const passwordButton = document.getElementById('demoPassword')
if (passwordButton) passwordButton.addEventListener('click', () => FormHelper.togglePassword(passwordButton))

Toggle form

You can toggle the attributes value, disabled and required on multiple fields when the parent is visible.

This is helpfull when you need to show/hide some part of a form and manage the validation.

html

<button id="toggleFormButton" aria-controls="toggleFormContent" aria-expanded="true" aria-pressed="true">Toggle</button>
<div id="toggleFormContent">
    <input name="test" type="text" value="Some input" required>
    <textarea>                            Some textarea
    </textarea>
    <select>
        <option value="null">--</option>
        <option value="1" selected>Lorem</option>
        <option value="2">Perferendis</option>
        <option value="3">Officiis</option>
    </select>
    <input type="checkbox" checked>
</div>

js

import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
import Toggle from "@natachah/vanilla-frontend/js/_toggle"
const toggleFormButton = document.getElementById('toggleFormButton')
const toggleFormContent = document.getElementById('toggleFormContent')

if (toggleFormButton && toggleFormContent) {
    new Toggle(toggleFormButton)
    const fields = toggleFormContent.querySelectorAll('input,select,textarea')
    toggleFormButton.addEventListener('toggle:changed', (e) => {
        FormHelper.toggleAttributes(fields, !toggleFormContent.hidden, {
            reset: true,
            disabled: true,
            required: ['test'],
            unchanged: ['test']
        })
    })
}

The method toggleAttributes() take 3 parameters as:

• List of HTMLElement fields
• Boolean if the container is visible or not
• An object of options

Option	Description	Default value	Format
reset	List of field to reset the value when hidden	true	can be boolean or array of name
disabled	List of field to disabled when hidden	true	can be boolean or array of name
required	List of field that are required when visible	false	can be boolean or array of name
unchanged	List of field that don't change	[]	array of name

WARNING

If the option for reset, disabled or required is set to true, it will impact all the fields.