Как валидировать несколько форм с помощью плагина just validate?

Question

[kopylov_sergey]

На странице есть две одинаковые формы, как их валидировать с помощью плагина just validate?

const validation = new JustValidate('.registration__form-bottom');

validation
  .addField('#userName', [
    {
      rule: 'required',
      errorMessage: 'Заповніть це поле',
    },
  ])
  .addField('#userPhone', [
    {
      rule: 'required',
      errorMessage: 'Заповніть це поле',
    },
  ]);

Comments

[kopylov_sergey]

Плагин обрабатывает только одну форму

Answer 1

[Владислав Enokin]

Чтобы проверить несколько форм с помощью плагина Just Validate, вы можете выполнить следующие действия:

Включите плагин JustValidate в свой HTML-файл:

<script src="https://cdn.jsdelivr.net/npm/just-validate@1.0.1/dist/js/just-validate.min.js"></script>

Добавьте атрибут data-jsv к каждой форме, которую вы хотите проверить, указав уникальное значение для каждой формы. Например:

<form data-jsv="form-1">
  <!--  интуты тут -->
</form>
<form data-jsv="form-2">
  <!--  интуты тут -->
</form>

Инициализируйте плагин Just Validate для каждой формы, передавая значение data-jsv формы в качестве первого аргумента и объект options в качестве второго аргумента. Например:

<script>
  new JustValidate( 'form-1', {});
  new JustValidate( 'form-2', {});
</script>

Добавьте правила проверки для каждого ввода, используя атрибуты data-jsv-*. Например:

<input type="text" data-jsv-required="true" data-jsv-pattern="^[a-zA-Z]+$">

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

Comments

[kopylov_sergey]

Огромное спасибо! Вечером попробую!

[Mico Sanoa]

спасибо, chatgpt

Answer 2

[djValentinoff]

А как реализовать если форма одна, но используется в 2 местах на странице? Получается одна и та же форма сделаная как модуль и вставлена в нужных местах на странице. На первой валидация срабатывает на второй нет. Как решить?