[Bug Fix] Save actions inside dropdown don't trigger HTML5 Validation

[pxpm]

Fixes #2339 When selecting any option from save actions dropdown the html5 validation was not running.

EDIT: Dunno what happened with this lang files, i just changed 1 file and commited 1 file. Never changed nothing in this lang files.

[scrutinizer-notifier]

The inspection completed: No new issues

[pxpm]

Hey @tabacitu

Fixed that bug and found another. Well technically not "our" bug. It's just the way HTML5 works.

PROBLEM

If we have 2 tabs (TAB A and TAB B) both with 2 fields, but TAB A has one that is required. If we are on TAB A and try to submit, no errors, but if we are in TAB B and try to submit with error on required field on TAB A, we will get something along this lines in console:

An invalid form control with name='field_name' is not focusable.

Nothing more is displayed and nothing happens. This could be very confusing for our users.

This happens because field_name is on TAB A and we are on TAB B, so browser can't focus on field on another TAB, but get the error and prevent submiting the form.

Solution

I searched alot, and tried diferent solutions. The only that I found to avoid this is switching to the tab where first error occurs and then display the error.

This is not the perfect solution, and unfortunatelly I think there is no perfect scenario for this. If you have required fields in different tabs you still get the error on console that the fields in the other tabs can't be focused. But we assure we show the first error to the user and switch to the tab accordingly.

Let me know your thougths on this.

Best, Pedro

[tabacitu]

This looks good to me! Thank you @pxpm . I just have this one question: https://github.com/Laravel-Backpack/CRUD/pull/2340/files#r370925989

[shealavington]

Is this still being addressed?

[tabacitu]

As far as I know, this has been fixed in Backpack 4.1 (currently in alpha, due out very soon) in a different way. So merging this fix inside 4.0 will cause conflicts when upgrading to 4.1. Am I correct @pxpm ?

If so, I'd rather just not include this fix in 4.0, if we launch 4.1 soon and it'll have this fixed in a better way. What do you think @pxpm ?

[tabacitu]

I thought we already fixed this, but no, we haven't. https://github.com/Laravel-Backpack/CRUD/issues/4125 popped up, so let's fix this now, during the "v5 launch polish" phase.

@pxpm can you please fix the conflicts here, re-test this and give me a green light to merge this?

[pxpm]

It's done @tabacitu fixed conflicts, refactored and added some more comments.

I've tested, everything seems to be working ok.

You need to add in your field definition :

// ... field definition
'attributes' => [
    'required' => 'required'
]

So you can test the browser validation.

[tabacitu]

@jorgetwgroup / @maurohmartinez could you please review and test this?

[maurohmartinez]

As soon as I checkout to I get Class "Backpack\CRUD\ViewNamespaces" not found. Any ideas @pxpm? @jorgetwgroup has this happened to you also?

[tabacitu]

@maurohmartinez you might need to merge main into fix-html5-validation to make that error go away.

[scrutinizer-notifier]

The inspection completed: No new issues

[maurohmartinez]

@pxpm Tested on Chrome, Safari, and Firefox (MAC) and it worked as a charm! To me, it looks ready @tabacitu.

[jcastroa87]

Hi @pxpm is working great!

I add email field to 3rd tab on Monsters

When im in the same tab, validation works

If i go to other tab, validation work, but didnt show

Just receive console notification

On "fix-html5-validation" branch, try same steps and everything works great

Even try to force not default save, still working.

Is ready to merge.

Cheers.

[jcastroa87]

Im sorry @maurohmartinez didnt see your answer before 😳 i dont want to make work twice.

Will not happen again.