Password Field

Introduction

The Password Field in Joget is a standard HTML input element designed to capture user input securely by disguising each character with an asterisk (*). This feature provides on-screen privacy for users when entering their passwords.

How does it work?

To see how the Password Field works, follow these steps:

1. Open up a form in the Form Builder
2. Drag and drop a Password Field element onto the canvas.
3. Click the Password Field to open the Configure Password Field properties.
4. Fill up the following fields:
   • Label: Password
   • ID: password
5. Click Apply Change and Save the changes on the Form Builder.
   
6. Click Preview, key in any value in the Password field, and it will be automatically masked. 
   

Configure Password Field

Configuring the Password Field involves setting its label, ID, and advanced options such as default values, maximum length, validators, and UI options.

Fields to configure:

• Label: The element label to be displayed to the end-user. It's a mandatory field, and you can add Font Awesome Icons to your menu labels
• ID: The element ID. By declaring it as password, a corresponding database table column c_password will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Suggestion: The Form Builder suggests an ID for an element based on the Label you have entered. Clicking on Accept will overwrite the value in ID with the suggested value.

Advanced options

Advanced options provide additional data handling, validation, and UI customization settings.

Data

The Data section for the Password Field in Joget allows you to define default values, maximum lengths, and validators to ensure secure and validated user input. This includes setting default values using hash variables, specifying maximum input lengths, and attaching validation plugins to ensure data integrity.

Fields to configure:

• Value: Default value when no existing value is found. A hash variable is accepted here. For example, you may key in #currentUser.firstName# #currentUser.lastName# to pre-populate the field with the currently logged-in user's name.
• Max Length: Maximum character length allowed.
• Validator: Attach a Form Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.
•  

UI

The UI section allows you to customize the appearance and behavior of the Password Field in the Joget form builder. This includes setting the element's size, making it readonly, and determining how the field should display when in readonly mode.

Fields to configure:

• Size: Width of the element.
• Enable Strength Checker: Displays strength checker to evaluate the password input's strength.
• Readonly: Determines if the element is editable.
• Display field as Label when readonly?: Displays the value of the element as plain text when the element is set to Readonly.

Related Links

• Protect Sensitive Data