Form Father

Form Father — это библиотека для обработки форм на чистом JavaScript, обеспечивающая удобную валидацию и отправку форм с использованием TypeScript.

Установка

Установите библиотеку с помощью npm:

npm install form-father

Использование

import Form from 'form-father';

Form.setDefaultParams({
  showLoaderButton: false,
  scrollToFirstErroredInput: false,
  logging: true,
});

const formElement = document.querySelector('#myForm');
const options = {
	onSubmit: formInstance => {
		// Действия при отправке формы
	},
	onResponse: (responseBody, formInstance) => {
		// Действия при получении ответа от сервера
	},
	// Другие опции...
};

const form = new Form(formElement, options);

Опции

• onSubmit: Функция обратного вызова, вызываемая при отправке формы.
• onResponse: Функция обратного вызова при получении ответа от сервера.
• onResponseSuccess: Функция вызывается при успешном ответе сервера (статус 200).
• onResponseUnsuccess: Функция вызывается при неуспешном ответе сервера (статус не 200).
• showLoaderButton: Показывать ли лоадер в кнопке отправки. По умолчанию true.
• scrollToFirstErroredInput: Прокручивать ли к первому полю с ошибкой. По умолчанию true.
• customTypeError: Кастомный тип ошибки.
• loaderColor: Цвет лоадера в кнопке отправки.
• logging: Нужно ли выводить данные в консоль. По умолчанию false.
• setDefaultParams(params): Метод setDefaultParams используется для установки значений по умолчанию для всех экземпляров формы. Эти параметры можно переопределить при инициализации конкретной формы.

Методы

• clearInputs(): Очищает все поля ввода формы.

Хелперы

Библиотека предоставляет ряд вспомогательных функций:

• serializeToFormData($element): Сериализует данные формы в объект FormData.
• isEmailValid(value): Проверяет, является ли строка валидным адресом электронной почты.
• isUrlValid(value): Проверяет, является ли строка валидным URL.
• isPhoneValid(value): Проверяет, является ли строка валидным номером телефона.
• closest($el, selector): Находит ближайший родительский элемент по заданному селектору.
• blockScrollBody(): Блокирует прокрутку страницы.
• unblockScrollBody(): Разблокирует прокрутку страницы.
• parseCommonResponseProperties(responseBody): Обрабатывает общие свойства ответа сервера.

© 2024 Poliklot