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

В разработанном приложении после ввода данных на экранных формах возникает задача валидации этих данных перед отправкой на сервер.

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

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

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

• Calendar;
• Chips;
• Checkbox;
• FileUploader;
• Input;
• RadioButton;
• Select;
• Switcher;
• TextArea.

При разработке экранной формы как в визуальном, так и в кодовом режиме Редактора Форм, вы можете передать свойству 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>) JS-библиотеки 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>

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

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

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

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

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