У нас есть простая форма, которую нам надо валидировать:

<form>
    <input name="name" />
    <input name="email" />
</form>

Как это сделать правильно? Очень просто.

Расширяем форму:

<form data-request="onSubmit" data-request-validate>

    <input name="name" />
    <span data-validate-for="name"></span>

    <input name="email" />
    <span data-validate-for="email"></span>

</form>

data-request="onSubmit" — это AJAX обработчик. Простыми словами, метод onSubmit будет обрабатывать отправку формы с помощью AJAX без перезагрузки страницы.

data-request-validate как раз и отвечает за валидацию формы с помощью AJAX.

span добавляем для того, чтобы вывести внутрь него(span) ошибки.

Теперь можем приступить к написанию правил валидации. Например, в классе компонента:

use October\Rain\Exception\ValidationException;
use Validator;

class MyComponent extends ComponentBase
{
    public function componentDetails()
    {
        return [
            'name' => 'ComponentName',
            'description' => 'Super Component',
        ];
    }

    // функция, которую мы указали в data-request="onSubmit"
    public function onSubmit()
    {
        // пишем правила валидации
        $rules = [
            'name' => 'required';
            'email' => 'required|email'; // можно использовать несколько правил
        ];

        // запускаем валидатор
        $validator = Validator::make(post(), $rules);

        // если нашли ошибки, то создаём исключение
        if ($validator->fails()) {
            throw new ValidationException($validator);
        } else {
            // ошибок нет, можно что-то сделать с формой, например отправить
        }
    }
}

Я же говорил, что просто 🙂

Остался ещё один важный штрих, без которого не добиться идеальной валидации — добавим к input классы ошибок.

Чуть-чуть расширим форму, добавив классы к каждому input’у:

<form data-request="onSubmit" data-request-validate>

    <input name="name" class="form-control" />
    <span data-validate-for="name"></span>

    <input name="email" class="form-control" />
    <span data-validate-for="email"></span>

</form>

И финальный штрих, добавим функцию в .js-файл, который подключаем в нашей теме:

# main.js

$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
    var $field = $(fieldElement).closest('.form-control') // укажем класс input'а

    if (!$field.length) {
        return
    }

    event.preventDefault()

    $field.addClass('has-error') // какой класс добавим в случае ошибки

    $(window).one('ajaxErrorMessage', function(event, message){
        event.preventDefault()
    })
})

// удаляем класс ошибки
$(document).on('ajaxPromise', '[data-request]', function() {
    var $form = $(this).closest('form')

    if (!$form.length)
        return

    $('.form-control.has-error', $form).removeClass('has-error')
})

Не забудь подключить .js-скрипт где-нибудь в <header> или <footer>:

<script src="{{ 'assets/js/main.js'|theme }}"></script>