Password Fields

Password fields automatically include a confirmation field and built-in validation to ensure both passwords match.

Automatic Features

Dual Input Fields:

• Main password field
• Confirmation password field (automatically appends -confirm to the field ID and name)

Validation:

• Automatically validates that both password fields match before form submission
• Displays “Passwords do not match” error if values differ
• Both fields must pass validation (e.g., minlength, pattern) individually

Custom Placeholder for Confirmation Field

Use the confirmPlaceholder setting to customize the placeholder text for the confirmation field:

{
  "confirmPlaceholder" : "Confirm your new password"
}

Example with all settings:

{
  "password": {
    "$ref"        : "https://www.totalcms.co/schemas/properties/password.json",
    "label"       : "Password",
    "placeholder" : "Enter your password",
    "minLength"   : 8,
    "settings"    : {
      "minlength"          : 8,
      "confirmPlaceholder" : "Confirm your password"
    }
  }
}

Default behavior: If confirmPlaceholder is not specified, the confirmation field will use the same placeholder as the main password field.

How Validation Works

The password field JavaScript automatically:

1. Finds the confirmation field using the main field’s ID + -confirm
2. Compares both field values during form validation
3. Sets custom validity message if passwords don’t match
4. Prevents form submission until passwords match

HTML structure generated:

<!-- Main password field -->
<input type="password" id="field-abc123" name="password" placeholder="Enter your password">

<!-- Confirmation field (automatically created) -->
<input type="password" id="field-abc123-confirm" name="password-confirm" placeholder="Confirm your password">

Common Use Cases

User registration:

{
  "password": {
    "$ref"        : "https://www.totalcms.co/schemas/properties/password.json",
    "label"       : "Password",
    "placeholder" : "Create a password",
    "minLength"   : 8,
    "settings"    : {
      "minlength"          : 8,
      "confirmPlaceholder" : "Confirm your password"
    }
  }
}

Password reset:

{
  "newPassword": {
    "$ref"        : "https://www.totalcms.co/schemas/properties/password.json",
    "label"       : "New Password",
    "placeholder" : "Enter new password",
    "minLength"   : 8,
    "settings"    : {
      "minlength"          : 8,
      "confirmPlaceholder" : "Re-enter new password"
    }
  }
}