Проверка формы Javascript с помощью Alpine.Js и Ionide.Js

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

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

При использовании Laravel 10 с Livewire, это потрясающий стек, в нем отсутствует инструмент проверки внешнего интерфейса, поэтому я изучаю проверку формы Javascript с помощью Alpine.Js (принесите с Livewire) и Ionide.Js, найденных на Github.

Я пишу здесь, потому что Ionide.Js был сильно переписан с многочисленными критическими изменениями, что означает, что предыдущие статьи больше не работают полностью, но по-прежнему являются отличным источником вдохновения, которые вам следует прочитать:

• Проверка формы с помощью Alpine.js и Iodine.js от Дикси Атай ноябрь 2021 г.
• Легкая проверка форм с помощью Alpine.js и Iodine.js, автор
  Hugh Haworth, октябрь 2021 г.

Вот скелет html form с атрибутами Alpine.js:

<div>
  <form id="form" action="/collection/create"
      x-data="formdata()"
      x-on:submit="submit($event)" >
    <div>
      <input x-model="fields.name.value"
        x-on:blur="validateField(fields.name)"
        name="name" type="text" />
      <p class="" x-cloak>
          <span x-text="fields.name.error"></span>
      </p>
    </div>
    <input type="submit" x-bind:disabled="isFormInvalid" />
  </form>
</div>

Данные AlpineJs задаются в форме. Ввод text и span сопоставляются соответственно со свойствами fields.name.value и fields.name.error объекта модель данных.

Событие отправки form сопоставляется с методом submit данных, а событие text input blur — с validateField данных. метод.

Атрибут ввода disabled для отправки сопоставляется со свойством данных isFormInvalid.

Вот модель данных AlpineJs, в которой используется IonideJs версии 8:

function formdata() {
    return {
        fields: {
            name: {
                value: null, error: null,
                rules: ["required", "minLength:2"]
            },
        },
        isFormInvalid: true,
        validateField(field) {
            let res = Iodine.assert(field.value, field.rules);
            field.error = res.valid ?
                null :
                res.error
                ;
            this.isFormValid();
        },
        isFormValid(){
            this.isFormInvalid = Object.values(this.fields).some(
                (field) => field.error
            );
            return ! this.isFormInvalid ;
        },
        submit(e) {
            var ok = this.isFormValid();
            if( ! ok )
                e.preventDefault();
            return ok ;
        }
    }
};

AlpineJs x-on:event.prevent не работает с условным выражением (обсуждение на github), поэтому мы используем событие submit.

Новый API IonideJs — это просто Iodine.assert(value, array of rules). Посмотрите в документации полный список правил валидации, включенных в Iodine.

Большое спасибо сообществу бесплатных кодеров за все эти замечательные инструменты, которые питают мою повседневную жизнь ❤