Validate form on blur option

[YoelisA]

What are you building with SQLPage ?

An admin panel with a long form.

What is your problem ? A description of the problem, not the solution you are proposing.

I have some dependent fields in my form that I would like to show only when a given condition in a previous field is met. To do so it's needed to add a WHERE clause on the dependent field and click the validate button. I believe clicking on the button is not very user-friendly since we are used to more reactive forms.

What are you currently doing ? Since your solution is not implemented in SQLPage currently, what are you doing instead ?

I wrote a piece of javascript to validate the form on blur and swap the new form html with the previous (so it doesn't trigger a full page reload) when the form data changes.

A clear and concise description of what you want to happen.

It would be nice to have an option in the form component like TRUE as 'validateOnBlur.

A clear and concise description of any alternative solutions or features you've considered.

I considered adding htmx to the project and create a new template based on the current form.

Additional context Add any other context or screenshots about the feature request here.

[lovasoa]

We would fetch the entire page from the server, and then try to replace the fields without loosing what the user has already entered?

If the page contains other things besides the form, they would be loaded but ignored?

Or would we do a full page reload, but in JavaScript ? If so, why not do a normal form validation and let the browser reload the page?

[YoelisA]

We would fetch the entire page from the server, and then try to replace the fields without loosing what the user has already entered?

Yes, what it did is just replace the form innerhtml with the parsed form from the server.

If the page contains other things besides the form, they would be loaded but ignored?

If we replace only the form inner html, the rest of the page will remain untouched.

Or would we do a full page reload, but in JavaScript ? If so, why not do a normal form validation and let the browser reload the page?

Triggering form validation with blur events leads to many reloads so if we do a full page reload it's visible and not super nice. Swapping the inner html of the form leads to a better experience I think.

I'm not sure that what I did was the best way to achieve what I wanted : make dependent fields visible without user click and without full page reload. Do you see other ways to achieve that ?

What I did was to add an event listener on blur events and submit events, on blur events, dispatch the submit event and on submit event send form data via ajax, get an html response back from the server, parse it and swap the inner form with the new one if the html is different.

[lovasoa]

Triggering form validation with blur events leads to many reloads so if we do a full page reload it's visible and not super nice. Swapping the inner html of the form leads to a better experience I think.

But with the page reload, the browser gives feedback to the user that the page is loading. Without it, we just load it in the background, and replace a form that the user has potentially already interacted with, losing their changes. I think this is a worse annoyance than a page reload.

[YoelisA]

You are afraid that the user will enter new things between the blur event and the server response ? Locally the server response is really fast so I don't have time to interact more with the form but I believe there is worse case scenario indeed.

I understand the idea that browser reload gives feedback that you can't interact with the form yet but it feels brittle (the page jitters)... maybe we can swap only the html of the input field that have been touched instead of the whole form but (we would miss the rerender of dependent fields in another part of the form) ? Or we can add a spinner and make the form as readonly during the request ?

Or we could mark the fields upon which other fields are dependent in sqlpage. When those special fields are touched, submission is triggered and the form is swapped. Or we do a full page reload and it should be less annoying because it happens less often than when we do it on the blur event.

[lovasoa]

What do you mean the page jitters ? Modern browsers should all be able to handle page refresh without jitter. This is what the official multistep form demo looks like for me:

The browser lets you know that it is loading when it is, but the page never loses its responsiveness, and elements don't jump around.

Unrelated: Vous faites un système de publication d'articles scientifiques en SQLPage ? Ça a l'air très intéressant ! C'est dans quel contexte ?

It is generally a good UX practice to split up long forms in multiple steps anyways; in this case I think it would be even faster for the user if they started on a page with four buttons "Article", "Traduction", "Issu d'un colloque" and "dépôt de données", and then landed on the form.

[YoelisA]

Here's with the full page reload : If you look at the menu bar you will notice flashes with the icons that I noticed too with your demo. It's not bothering when you click on the button once in while but it's annoying when you reload the page for every blur events.

I agree for the multiple steps forms, it's a good ux practice but then you need to think about what happens if the user wants to go back to the previous step and everything (and I have to make a different form for the update part). And I have far more dependent fields than that. Here I'm more leaning toward a progressive disclosure type of UX (and I don't really have my hands on the design to be honest). Validation on blur have also other use cases, such as password validation where users get faster feedback.

Et oui je travaille pour une revue de géographie qui a besoin d'administrer les soumissions d'article :)

[lovasoa]

You are right about the problem with the icons and the list selection flashing during page load. This is a bad experience for everyone, not only in multistep form, and I'd like to work on that.

then you need to think about what happens if the user wants to go back to the previous step

I generally just use hidden form fields to keep the form state between pages. This way the browser's back button just works natively to navigate back to the previous form step.

I'm more leaning toward a progressive disclosure type of UX (and I don't really have my hands on the design to be honest).

Be careful if you continue this way, to properly initialize sqlpage components that require it. For instance, selects with dropdowns use a javascript library, and won't work if they are not initialized. You can run .dispatchEvent(new CustomEvent("fragment-loaded", { bubbles: true })) on the DOM elements that you create or modify for that.