[4.2][Feature] AJAX Instant Field Validation. Live Forms Validation.

[pxpm]

Bug report

What I did

Added a field to a crud with attributes => ['required' => 'required'] to apply browser validation before submit. Also added required in in server (laravel) validation.

What I expected to happen

The error message is the same if it's browser validation or server validation.

What happened

Browser validation message is different from server validation. Like:
Please fill this field => The field xxxx is required

What I've already tried to fix it

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

PHP VERSION:

PHP 7.2.18 (cli) (built: Apr 30 2019 23:39:01) ( ZTS MSVC15 (Visual C++ 2017) x86 )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

LARAVEL VERSION:

Warning: You should avoid overwriting already defined auth settings for github.com.

laravel/framework v6.12.0 The Laravel Framework.

BACKPACK VERSION:

backpack/backupmanager 2.0.3 Admin interface for managing backups in Backpack, on Laravel 5.2+
backpack/crud 4.0.34 Quickly build an admin interfaces using Laravel 6, CoreUI, Boostrap 4 and jQuery.

[tabacitu]

Hmm... Aren't the HTML5 error messages dependant on the browser? Not the current page? That's my experience as an internet user - that HTML5-type validation returns default validation messages. For example, my parents' browsers are in Romanian. So even if the page they're filling in is in English, the error messages are in Romanian - it's something the browser does, not the website. Has this changed in the last few years?

--

I don't usually use HTML5 validation in my create/update forms. The idea behind using Laravel FormRequests was that:

• it's much easier to create a rock-solid validation in Laravel, than HTML5 / JS;
• you need a rock-solid PHP validation anyway, even if you do JS validation;
• it's frustrating for the user to pass one validation type, then run into another;

So the best solution (I think) is to only do PHP validation for these forms.

I do understand if people want to do HTML5 validation on them. And it's easy to support. But I don't know how far we should go on making it easy / encouraged to use HTML5 validation in addition to PHP validation. I really don't see the need for "required" in HTML. If anything, the place where I do see that JS validation would be FAR superior to PHP validation is for things like UNIQUE checks (for URLs), where you want the username/slug/id checked in realtime, as you type. However, this is so rarely needed, and pretty easy to build yourself with a field with AJAX, that it's not worth, at this point, creating an official feature.

[pxpm]

Hey @tabacitu ✋

From my knowledge yes, message depend on browser. But here (Backpack) users are in an admin panel, so if the panel language is english, message should be english the way I see it.

NEVER TRUST USER INPUT is the rule of thumb.

BUT provide him a good UI/UX.

From my point of view, and the only reason why I use any client side validation (be it browser or jquery validation etc) is to provide the user a better (in my opinion MUCH BETTER) experience.

The ideal scenario here for me would be:

• Write my validation in PHP (Laravel validator) -The usual work!
• Have an interface that converts that PHP validation to JS validation and setup a route that responds to unique queries from validators.
• Apply exactly the same validation as in PHP to my fields so you don't end up with passing one and failing other.

I don't think this should be a priority, I just like the concept of pre-validate before sending to server. For some reasons:

• The refresh of the page takes atleast 2+ seconds depending on the server load, your connection etc etc.
• If you are in mobile, or connected via 4g or wtv, you will spare a lot of MB in traffic from not refreshing the page.
• You kinda guarantee to the user, if you pass this validation you will be allowed in next step, be it confirm your email or submit some data to server. (ofcourse you will have a rocksolid PHP validation that got converted to JS 🔥 )

All that and I just have to write my laravel validation as always ? ** SIGN ME IN ! **

Let me know what you think of it.

Best,
Pedro

[tabacitu]

Hmmm... well if you put it that way 😄 it's not that far out.

Let's save it as a to-do for 4.2, when I expect we'll be able to rewrite the Create/Update forms to work with AJAX, instead of refreshing the page. I think that's the proper time to take care of this.

It could work like this:

• on keyOut, we send an AJAX request to an endpoint that runs the Laravel validation for that input, and that input alone;
• depending on the AJAX response, we make the input red/green and/or show the error message;

It shouldn't be too difficult for simple fields (text, number, radio, etc) but to add support to all field types (table, browse, etc)... might be quite a lot of work :-) But in the end, I guess all fields could have a minimum like now, where the Label gets red/green upon validation.

But this way:

• we could provide validation messages/feedback before the user clicks SAVE;
• by the time the user clicks SAVE, all inputs are already valid;
• the developer only writes one validation, the PHP one, but gets both JS and PHP validation (like you said);

Sounds very nice indeed 😄

[pxpm]

DOPE! 🔥 🔥 🔥

[pxpm]

This is just Livewire after all.

See you soon.