Делаем формы во фронтэнде более UX-овыми

Просто добавляем html5 атрибут required для все обязательных полей, и тогда при отправке формы пользователю не придется ждать пока страница перезагрузится и подсветит ему незаполненные поля.

Для этого на нужно будет только добавить пару preprocess функций.

/**
 * Implements hook_preprocess_HOOK().
 */
function THEME_preprocess_textfield(&$variables) {
  $element = &$variables['element'];
  if ($element['#required']) {
    $element['#attributes']['required'] = 'required';
  }
}

/**
 * Implements hook_preprocess_HOOK().
 */
function THEME_preprocess_textarea(&$variables) {
  $element = &$variables['element'];
  if ($element['#required']) {
    $element['#attributes']['required'] = 'required';
  }
}

/**
 * Implements hook_preprocess_HOOK().
 */
function THEME_preprocess_password(&$variables) {
  $element = &$variables['element'];
  if ($element['#required']) {
    $element['#attributes']['required'] = 'required';
  }
}

Теперь перед отправкой форма будет проходить проверку браузером на заполнение, т.е. форма не отправится пока не будут заполнены все требуемые поля.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *