Skip to content

Input Password

Use this extenstion to extend the functionality of password input elements. Extended functionality includes:

  • Toggling the display of the password input value
  • Real time password validation UI

By default this extension is enabled in your core Genesis installation. This extension is apart of the HTMLFormValidation class which adds the features to all inputs with the type of password.

Installation

Add the following statement to any Javascript file.

import InputPassword from 'extensions/form-validation/InputPassword';

Example Usage

.mvt

Add the js-input-password-requirement class to the password input.

<input id="l-Create_Customer_Password" class="g-form-input js-input-password-requirement" type="password" name="Customer_Password" autocomplete="new-password" pattern="&mvte:ui:password:regex;" title="&mvte:ui:password:requirements;" required>

.js

Initialize the InputPassword object after following the installation step.

new InputPassword(document.getElementById('js-password-input'));

Live Example:

Example of the functionality