How to change the title and add a placeholder to password and confirm password field through hook_form_alter?

Question

How can i remove the label of the password and the confirm password field through hook_form_alter functionality ?

Tried the below:

$form['pass']['#title']= t(''); $form['pass']['#description']= t('');

$form['account']['pass']['pass1']['#attributes']['placeholder']= t('Password');

$form['account']['pass']['pass2']['#attributes']['placeholder']= t('Confirm Password');

But no change in the behavior.

This is the exact code that i have written in my .theme file.

   function THEMENAME_form_user_pass_reset_alter(&$form, &$form_state, $form_id) {
  // Get default process function array:
  $element_info = element_info('password_confirm');
  $process = $element_info['#process'];
  // Add our process function to the array:
  $process[] = 'port_process_password_confirm';
  $form['account']['pass']['#process'] = $process;
}

function port_process_password_confirm($element) {
  $element['pass1']['#title'] = t('New password');
  $element['pass2']['#title'] = t('Confirm new password');
  return $element;
}

The output that i am getting is as per the below image

Answer 1

In D8 You can try the code below:

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\PasswordConfirm;

function mymtheme_form_user_pass_reset_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  $form['account']['pass']['#process'][] = 'mytheme_form_user_register_form_process_pass';
}

function mytheme_form_user_register_form_process_pass(&$element, FormStateInterface $form_state, &$complete_form) {
  $element = PasswordConfirm::processPasswordConfirm($element, $form_state, $complete_form);
  $element['pass1']['#placeholder'] = t('Password here please');
  $element['pass2']['#placeholder'] = t('Password again here please');
  $element['pass1']['#title'] = t("New password");
  $element['pass2']['#title'] = t("New password confirm");
  return $element;
}

See more PasswordConfirm.php

In D7

function mymtheme_form_user_pass_reset_form_alter(&$form, &$form_state, $form_id) {
   // #process handler to modify the password element expanded by Field API.
   $form['pass']['#process'] = array('form_process_password_confirm', 'register_alter_password_confirm');
}

/**
 * Alter password and confirm password fields to remove title and insert placeholder.
 */
function register_alter_password_confirm($element) {
    $element['pass1']['#attributes']['placeholder'] = t("Password");
    $element['pass2']['#attributes']['placeholder'] = t("Confirm password");
    $element['pass1']['#title'] = t("New Password");
    $element['pass2']['#title'] = t("New password confirm");
    return $element;
}

See more https://www.drupal.org/project/drupal/issues/540340#comment-2782800

Answer 2

You're altering the wrong form, you should alter the user_form, like this:

function THEMENAME_form_user_form_alter(&$form, FormStateInterface $form_state, $form_id){
  $form['account']['pass']['#process'][] = '_THEMENAME_process_password_confirm';
}

function _THEMENAME_process_password_confirm($element, FormStateInterface $form_state, &$complete_form){
  $element = PasswordConfirm::processPasswordConfirm($element, $form_state, $complete_form);
  $element['pass1']['#title'] = t('New password');
  $element['pass2']['#title'] = t('Confirm new password');
  return $element;
}

Answer 3

Code to Alter pass & confirm pass field title along with password strength indicator display: Drupal(8/9/10)

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\PasswordConfirm;


function mytheme_form_user_form_alter(&$form, FormStateInterface $form_state, $form_id){
  $form['account']['pass']['#process'][] = 'mytheme_form_user_register_form_process_pass';
}

function mytheme_form_user_register_form_process_pass(&$element, FormStateInterface $form_state, &$complete_form){
  $element = PasswordConfirm::processPasswordConfirm($element, $form_state, $complete_form);
  // Update the title
  $element['pass1']['#title'] = t('New password');
  $element['pass2']['#title'] = t('Confirm New password');
  // Added core 'user_form_process_password_confirm' function 
  // so that Password strength indicator visible after title  update
  $element['password_confirm']['#process'][] = 'user_form_process_password_confirm';
  return $element;
}

Note : Whenever update title of pass & confirm pass field , password strength indicator missing in case of user register & user edit page , so added below line code to display password strength indicator along with update title of pass & confirm pass field

$element['password_confirm']['#process'][] = 'user_form_process_password_confirm';

Answer 4

The above solution worked for me but the problem was wrong function name. The solution that worked for me :

function THEMENAME_form_user_pass_reset_alter(&$form, FormStateInterface $form_state, $form_id){
    $form['pass']['#title'] = t('');
    $form['pass']['#description'] = t('');
    $form['pass']['#process'][] = 'test_form_user_register_form_process_pass';
    $form['actions']['submit']['#attributes'] = ['class' => ['registerbtn']];
}

function test_form_user_register_form_process_pass(&$element, FormStateInterface $form_state, &$complete_form) {
  $element = PasswordConfirm::processPasswordConfirm($element, $form_state, $complete_form);
  $element['pass1']['#placeholder'] = t('Password here please');
  $element['pass2']['#placeholder'] = t('Password again here please');
  $element['pass1']['#title'] = t("");
  $element['pass2']['#title'] = t("");
  return $element;
}