Валидация данных перед отправкой на сервер

Данные, которые пользователь приложения вводит на экранных формах, необходимо проверять на соответствие определенным правилам — валидировать — до отправки на сервер.

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

Проверка данных на соответствие правилам

Вы можете настроить проверку данных с помощью свойства Error, например, для следующих компонентов:

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

Следующий блок кода демонстрирует анализ значения переменной состояния UserModel.OldPassword и присвоение значения свойству Error исходя из условия заполнения поля ввода старого пароля. Если поле ввода старого пароля не заполнено, значению свойства Error присваивается строка с сообщением об ошибке.

Error={(OldPassword = UserModel.OldPassword) => {
  if (!OldPassword) return 'Поле обязательно';
}}

Вы можете описывать правила валидации данных в файле с расширением mdvalidations. Если такого файла нет в списке файлов разрабатываемого проекта, создайте его.

Следующий блок кода демонстрирует правило, которое описано в файле *.mdvalidations и имеет имя Password. Это правило описывает требования к данным в поле ввода пароля. Такое правило может быть применено к нескольким полям ввода: старый пароль, новый пароль и подтверждение пароля.

export default {
  Password: (val = '') => /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(val);
}

В файле с расширением mdvalidations могут быть описаны несколько правил валидации данных.

Для использования правила валидации данных, описанного в файле *.mdvalidations, вам нужно указать имя этого правила при вызове метода getValidation(<ruleName>) библиотеки FrontendCore.

Cледующий блок кода демонстрирует вызов метода getValidation('Password') с именем правила, описанного в *.mdvalidations (см. пример выше). Значение переменной состояния UserModel.OldPassword экранной формы анализируется на предмет соответствия правилу, указанному в параметрах метода. После запуска разработанного приложения при несоответствии введенного значения правилу будет отображаться сообщение Поле должно содержать прописные, строчные буквы и цифры.

Error={(OldPassword = UserModel.OldPassword) => {
  if (!getValidation('Password')(OldPassword)) return 'Поле должно содержать прописные, строчные буквы и цифры';
}}

Подсвечивание компонентов с ошибочными данными

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

Для подсвечивания компонентов с ошибочными данными вам нужно связать свойства HighlightError дочерних компонентов и свойство Touched родительского компонента Form. Вы можете связать эти свойства с помощью переменной состояния экранной формы. Свойство Touched принимает значение true при нажатии кнопки, для которой свойство Mode имеет значение Submit. До момента нажатия этой кнопки подсветка не отображается.

Следующий блок кода демонстрирует связывание свойства Touched компонента Form и свойств HighlightError дочерних компонентов Input и Select с помощью переменной состояния Form.touched.

<Form
  Touched-var="Form.touched"
>
  <Input
  // ...
    HighlightError-var="Form.touched"
  />
  <Select
  // ...
    HighlightError-var="Form.touched"
  />
  <Button
    Mode='Submit'
    Text='Отправить'
  />
</Form>

Настройка компонентов экранной формы для валидации данных перед отправкой на сервер

Для валидации данных перед отправкой на сервер рекомендуется использовать следующую последовательность действий:

Поместить компонент Button на компонент Form. Свойству Mode этого компонента Button должно быть присвоено значение Submit. По нажатию этой кнопки свойство Touched компонента Form получает значение true.
Описать обработчик события OnSubmit() для компонента Form. В коде этого обработчика необходимо вызвать метод validate(), указав в качестве параметра переменную состояния, значение которой изменяют все дочерние компоненты компонента Form.

Следующий блок кода демонстрирует описание обработчика события OnSubmit(), в котором используется метод validate(). Также этот фрагмент демонстрирует связывание свойства OutputState компонентов Input дочерних компоненту Form и переменной состояния ValidationState. Если данные, введенные во все компоненты, верны, данные отправляются на сервер.

<Form
  OnSubmit={() => {
            const form = getValue('ValidationState');
            if (validate(form)) {
              const model = getValue('UserModel');
              executeAction('ChangePassword', model);
            }
      }}
>
  <Input
  // ...
    OutputState-var="ValidationState.OldPassword"
  />
  <Input
  // ...
    OutputState-var="ValidationState.NewPassword"
  />
</Form>

Результирующий блок кода демонстрирует ввод данных в поля OldPassword, NewPassword и ConfirmPassword, валидацию данных и отправку данных на сервер.

<Form
  Touched-var="FormTouched"
  OnSubmit={() => {
    const form = getValue('ValidationState');
    if (validate(form)) {
      const model = getValue('UserModel');
      executeAction('ChangePassword', model);
    }
  }}
>
  <Input
    Mode="Password"
    Model-var="UserModel.OldPassword"
    Label={() => getLocalization('Common.OldPassword')}
    Error={(OldPassword = UserModel.OldPassword) => {
      if (!OldPassword) return 'Поле обязательно';
      if (!getValidation('Password')(OldPassword)) return 'Поле должно содержать прописные, строчные буквы и цифры';
    }}
    HighlightError-var="FormTouched"
    OutputState-var="ValidationState.OldPassword"
    CSS={['pb-8']}
  />
  <Input
    Mode="Password"
    Model-var="UserModel.NewPassword"
    Label={() => getLocalization('Common.NewPassword')}
    Error={(NewPassword = UserModel.NewPassword) => {
      if (!NewPassword) return 'Поле обязательно';
      if (!getValidation('Password')(NewPassword)) return 'Поле должно содержать прописные, строчные буквы и цифры';
    }}
    HighlightError-var="FormTouched"
    OutputState-var="ValidationState.NewPassword"
    CSS={['pb-8']}
  />
  <Input
    Mode="Password"
    Model-var="UserModel.ConfirmPassword"
    Label="Подтверждение нового пароля"
    Error={(ConfirmPassword = UserModel.ConfirmPassword) => {
      if (!ConfirmPassword) return 'Поле обязательно';
      if (!getValidation('Password')(ConfirmPassword)) return 'Поле должно содержать прописные, строчные буквы и цифры';
    }}
    HighlightError-var="FormTouched"
    OutputState-var="ValidationState.ConfirmPassword"
    CSS={['pb-8']}
  />

  <Group Align="End" Height="auto" VerticalAlign="Center">
    <Button
      CSS={['mt-16']}
      Mode="Submit"
      Text="Сменить пароль"
      Style="Primary"
    />
  </Group>
  <Text CSS={['mt-16']} Value-var="ErrorText" Visible-var="ErrorText" />
</Form>

Связанные статьи

Методы JS-библиотеки FrontendCore

Проверка данных на соответствие правилам​

Подсвечивание компонентов с ошибочными данными​

Настройка компонентов экранной формы для валидации данных перед отправкой на сервер​

Связанные статьи​

Проверка данных на соответствие правилам

Подсвечивание компонентов с ошибочными данными

Настройка компонентов экранной формы для валидации данных перед отправкой на сервер

Связанные статьи