Как строить и подтвердить красивые формы с ванильными HTML, CSS, & js

Формы тяжелые.

Знание того, как правильно собирать и подтвердить пользовательские данные, является одним из наиболее важных навыков, которые необходимо иметь разработчик Frontend. Но это трудно, потому что краевые случаи изобилуют.

Вы должны рассмотреть все способы, которыми пользователь может нарушить вашу довольно небольшую форму, одновременно обеспечивая отличный пользовательский опыт.

Часть UX важно, потому что формы являются привратниками преобразования для продуктов и услуг. Если вы, как разработчик переднего конца, неверьтесь, могут быть значительные финансовые последствия.

Вот почему там есть тысячи (незначительные преувеличения) библиотек формы, которые реализуют лучшие практики отрасли.

Нет ничего плохого в использовании этих библиотек. Проблема возникает, когда Devs использует их, не понимая, как формы на самом деле работают и почему определенные шаблоны считаются Стандарты Отказ

Я собираюсь показать вам, как я бы построил форму регистрации с нуля, используя только HTML, CSS и JavaScript.

ОК, без дальнейшего ADO, давайте погрузимся в.

Настольный

Мобильный

Когда вы вручите дизайн, как это, ваш первый вопрос должен быть, сколько штатов не представлен здесь?

Приведенные выше примеры представляют одно состояние (когда пользователь посещает страницу входа в систему, это то, что они увидят на рабочем столе и на мобильном телефоне).

Другие государства будут включать:

Состояние ошибки
- Что произойдет, если я введу письмо, которое уже существует?
Загрузка состояния
- Что происходит, когда я отправляю форму?

При планировании вашей работы убедитесь, что подумайте о том, что не должно учитывать. Вам необходимо тщательно просмотреть требования к функциям и задавать вопросы, если вы думаете, что что-то отсутствует.

Говоря о требованиях …

Как разработчик, вы часто будете представлены PRD (Документ требований к продукту) из менеджера по продуктам, дизайнеру или менеджеру проекта.

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

Вставьте мою шляпу менеджера по продукту, вот требования к функциям для нашей формы:

Пользователь должен предоставить адрес электронной почты
Пароль должен быть длиной не менее 10 символов и содержать хотя бы одну заглавную букву, номер и специальный символ.
Мы должны показать сообщения об ошибках пользователю, когда они не соответствуют требованиям

Разметка

Первый код, который мы напишем, будет HTML с простой Dash CSS.

Пока не похоже, но здесь здесь хорошая работа. Давайте погрузимся немного.

Мы настроили сторону и основные элементы вместе с нашей формой
Я использую BEM в качестве руководства для создания названий классов и семантических элементов HTML для чтения.
Наша страница регистрации требует мобильного первого подхода, что означает, что мы пишем мобильные стили сначала и добавляем точки останова для стилей для рабочего стола.
Я использую CSS Grid для общего макета и Flexbox для элементов положения в главном разделе.
Я добавил слушатель отправки события для формы вместе с функцией обработчика событий, которые просто регистрируют объект события.

Проверка

Давайте использовать некоторые встроенные в логике проверки, выбрав наши типы ввода с умом. Мы будем использовать следующее:

Тип ввода электронной почты
Тип ввода пароля

Тип ввода электронной почты дает нам пару приятных валейков бесплатно.

Это проверяет, чтобы убедиться, что @ Символ используется
Это также проверяет, что есть текст после символа

Так как требуется как электронная почта, так и пароль, давайте добавим Требуется атрибут оба элементам. Мы также добавим Minlength атрибут на ввод пароля.


  
    
      Sign up with
      
        
        
      
    
  
  
    Or sign in with email and password

Type = Email Атрибут говорит браузеру, что он должен подтвердить ввод в качестве электронного письма.

Minlength Атрибут на входе пароля дает нам это полезное сообщение об ошибке:

Теперь в нашей функции handlesignupformsubmit мы можем использовать Formdata API Чтобы получить значения из нашей формы и в конечном итоге отправлять их на API.

function handleSignupFormSubmit(e) {
  // prevent default browser behaviour
  e.preventDefault();

  const formDataEntries = new FormData(signupForm).entries();
  const { email, password } = Object.fromEntries(formDataEntries);

  // submit email and password to an API
}

Сообщения об ошибках

Сообщения об ошибках, которые отображаются браузером, полезны для начала, но что, если вы хотите, чтобы эти сообщения оказывать ниже их соответствующей входной форме? Что, если вы хотите контролировать, как они выглядят?

К сожалению, браузер не дает нам никакого контроля над тем, как отображается сообщение об ошибке по умолчанию. Так что это где наш DKH-FORM-FILE__messages Элементы DIV вступают в игру. Мы можем оказывать наши пользовательские сообщения об ошибках внутри этих элементов.

Давайте напишем пару собственных функций валидации, чтобы проверить, что пароль нашего пользователя и значения электронной почты соответствуют требованиям.

function validatePassword(password, minlength) {
  if (!password) return 'Password is required';

  if (password.length < minlength) {
    return `Please enter a password that's at least ${minlength} characters long`;
  }

  const hasCapitalLetter = /[A-Z]/g;
  if (!hasCapitalLetter.test(password)) {
    return 'Please use at least one capital letter.';
  }

  const hasNumber = /\d/g;
  if (!hasNumber.test(password)) {
    return 'Please use at least one number.';
  }

  return '';
}

function validateEmail(email) {
  if (!email) return 'Email is required';
    
  const isValidEmail = /^\S+@\S+$/g
  if (!isValidEmail.test(email)) {
    return 'Please enter a valid email';
  }

  return '';
}

Regex /^ \\ S + @ \\ S + $/G далеко от доказательства пули, но он, по крайней мере, проверяет, чтобы убедиться, что есть символы до и после @ символ.

Лучший способ проверить электронное письмо – отправить письмо-подтверждение любому пользователю, которое подписывает. Затем пользователь должен будет открыть это электронное письмо и щелкнуть ссылку, чтобы подтвердить, что их адрес электронной почты действителен.

Если вы хотели бы копать глубже в проверку электронной почты клиента, это отличное нить Отказ

Теперь давайте выясним, как сделать сообщения об ошибках на странице.

function handleSignupFormSubmit(e) {
  // prevent default browser behaviour
  e.preventDefault();

  const formDataEntries = new FormData(signupForm).entries();
  const { email, password } = Object.fromEntries(formDataEntries);

  const emailErrorMessage = validateEmail(email);
  const passowrdErrorMessage = validatePassword(password);

  if (!emailErrorMessage) {
		// select the email form field message element
    const emailErrorMessageElement = document.querySelector('.email .dkh-form-field__messages');
    // show email error message to user
    emailErrorMessageElement.innerText = emailErrorMessage;
  }

  if (passowrdErrorMessage) {
		// select the email form field message element
    const passwordErrorMessageElement = document.querySelector('.password .dkh-form-field__messages');
    // show password error message to user
    passwordErrorMessageElement.innerText = passowrdErrorMessage;
  }
}

Одна дополнительная вещь, которую я позвоню: для того, чтобы эти сообщения могли появиться, нам нужно удалить Требуется атрибуты как от входов электронной почты, так и пароля.

Нам нужно изменить значение атрибута типа для ввода электронной почты.

Нам также нужно удалить Minlength атрибут из ввода пароля.

Обновление этих атрибутов удаляет проверку на основе браузера в пользу нашей собственной логики проверки. Вот как наши пользовательские сообщения об ошибках рендерируют:

Стили

Я оставляю CSS до конца, потому что, в моем личном опыте, немного сложнее сосредоточиться на логике, когда визуальный дизайн завершен.

Когда компонент или страница «выглядит», сделано для глаз, он может создать ложное чувство, которое оно на самом деле сделано. У меня нет никаких исследований, чтобы поддержать это, просто мое личное мнение.

Вот состояние нашего кода после добавления довольно много CSS.

Настольный

Мобильный

Состояние ошибки

Я включил шрифт потрясающий Иконки для кнопок Github и Twitter.


  
    Sign up with

Резюме

Мы создали строительные блоки для создания регистрации и входа в систему без 3-го библиотек сторон. Вы можете проверить окончательный исходный код здесь Отказ

Если вы используете тарифы, такую как Rect или Vue, существует тонна потрясающих библиотек формы и валидации. Вы можете наклониться на них, чтобы сделать работу быстро.

Однако, если вы новичок в разработке программного обеспечения, я бы сначала поощрял вас сосредоточиться на основах, прежде чем использовать эти инструменты.

Я получил свою первую работу как разработчик пять лет назад, и мое путешествие в Tech навсегда изменила мою жизнь к лучшему. Я считаю, что важно сосредоточиться и освоить основы, чтобы вы могли легче понять инструменты, такие как React и Vue.

Одна из проблем, которые я заметил, когда Запуск встречи Я в течение многих лет было то, что люди, которые были новичны для кодирования, достигнуты для библиотек и рамки слишком быстро. Это оказалось, что больно их и многие боролись во время интервью.

Если вы узнаете, как кодировать и могли бы использовать некоторую помощь, не стесняйтесь добраться до меня на Twitter Отказ С нетерпением ждем помощи, однако я могу.

Настольный

Мобильный

Разметка

Проверка

Сообщения об ошибках

Стили

Настольный

Мобильный

Состояние ошибки

Резюме

Читайте ещё по теме: