[4.x] Support Laravel Precognition on front end forms

[ryanmitchell]

This PR adds support for Laravel Precognition in front end forms ({{ form:create }}).

To do this I've moved the validation logic out of FormController and into a FormRequest.

I needed to surface the Validator being used behind the scenes so added a public method on Statamic's Validator to give access to that.

From my own tests using the Alpine driver this seems to be working well.

Closes statamic/ideas#1005

[ryanmitchell]

I've just noticed the json response isnt quite the same now - moving to draft until I resolve it.

[robdekort]

I've been playing around with this PR. This stuff looks really interesting. Thanks Ryan! One thing I found though, is that all fields validate on blur. This is not something that happens in the Precognition video, and I doubt it's the intended behaviour.

Here's an example of what I get:
https://github.com/statamic/cms/assets/69107412/ef415bed-4d04-4c11-a3f3-04dc79fb9844

I understood Ryan got the same behaviour. I don't know why it happens, but perhaps this has something to do with the Statamic internals. Just wanted to leave this here in case it rings a bell for anyone.

[jasonvarga]

Can you show how you are triggering the validation in your html/js?

[robdekort]

Sure. I followed the precognition docs and use the following on my form fields:

@change="form.validate('{{ handle }}')"

[jasonvarga]

Using laravel-precognition-vue?

[robdekort]

Using laravel-precognition-vue?

Ah sorry, no. I use alpine: laravel-precognition-alpine.

[ryanmitchell]

I think it's to do with the alpine driver - it always sends all the fields, maybe thats not the case with other drivers. Its possible to work around with some Alpine functions... eg

        <form x-data="{
            form: $form('post', '/!/forms/test', { message: '', email: '', }),
            hasChanged: [],
            hasSubmitted: false,
            change(handle) {
                if (! this.hasChanged.includes(handle)) {
                    this.hasChanged.push(handle);
                }

                this.form.validate(handle)
            },
            showError(handle) {
                return (this.hasSubmitted || this.hasChanged.includes(handle)) && this.form.invalid('message')
            },
            submit() {
                this.hasSubmitted = true;
                this.form.submit()
                    .then(response => {
                        this.form.reset();

                        alert('Form submitted.')
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
        }" @submit.prevent="submit">

            <label for="message">Message</label>
            <input
                id="message"
                name="message"
                x-model="form.message"
                @change="change('message')"
            />
            <template x-if="showError('message')">
                <div x-text="form.errors.message"></div>
            </template>

            <label for="email">Email</label>
            <input
                id="email"
                name="email"
                x-model="form.email"
                @change="change('email')"
            />
            <template x-if="showError('email')">
                <div x-text="form.errors.email"></div>
            </template>

[robdekort]

Interesting. Thanks for sharing! If it does turns out to be an issue with the Alpine driver specifically, I’d be happy to open an issue on the Precognition repo.

[marcorieser]

Tinkered with Precognition in plain Laravel and this PR. In plain Laravel just the changed field gets validated. With this PR all fields / rules are validated.

I can narrow it down to the overwritten method getValidatorInstance() in the FormRequest.

As soon as I return the parent implementation when the request is precoginitive, it seems to work as in plain Laravel. Not sure which side effects could occur but maybe this helps.

This works:

  protected function getValidatorInstance()
  {
      if ($this->isPrecognitive()) {
          return parent::getValidatorInstance();
      }

      return $this->getCustomValidator()->validator();
  }

[ryanmitchell]

@marcorieser thanks for digging. I've taken a difference approach: 114c39f (#8886)

[robdekort]

This does the trick guys! Great!

[marcorieser]

Strange thing is that sometimes the validation error appear instantly when blurring eg. an email field but sometimes it takes up to 1s (locally). No idea why. Rob is experiencing the same he told me.

[robdekort]

Your latest commit makes a massive difference. I've done a few tests and it seems instant now.

[robdekort]

In action. Awesome stuff.
https://github.com/statamic/cms/assets/69107412/cee1dacc-6466-4d6d-b568-ac35f549c426

[robdekort]

I just tested this PR (not using Precognition) with the native form tags (submission via post and using fetch()) and I can confirm these methods still work with this pull request.

[jasonvarga]

Thank you!

[robdekort]

Thank you!

Welcome! Does it show I'm eager for it to get merged? ;-)

[jasonvarga]

In general, this is working pretty great though. 🤘

[ryanmitchell]

Well that certainly made things a lot easier.
That should be all the changes you suggested made.

The requested changes were made.