Forum
Modify behaviour after form validation fails
Currently, when using the baked-in form validation and Forms add-on app, if:
- a form is submitted that does not pass validation
- the page appears to be "refreshed"
- the perch:error tags are displayed
My problem is that after step 2 above, it might not be clear to the user that the form failed, since they're now back at the top of the page. Of course, what the user can see is dependant on the design of the page (which Perch cannot help with), but I think it's safe to say that in many common use-cases (such as on a mobile site) you might not be able to show the form within the initial viewport.
I think that this could be solved in one of two ways:
- include the ability to match a perch:error tag to a failed form, regardless of which field was incorrect – this "catch-all" tag could then get some absolute positioning via CSS and sit at the top of the reloaded page, warning about the errors; or
- after the page refreshes due to the failed validation, position the user at the first error (or anchored to the id of perch:form)
I could also use a third-party script that already offers one of my two suggestions, but I quite like how Perch handles validation and errors, and would prefer to stick to using it.
Any suggestions?
is a possibility - we'll look into that.
simply can't happen without something in the browser. The only way Perch can position the page after submitting the form is by including a
#fragmentIDin theactionURL. But that gets written long before the user ever fills out the form - we can't predict what error will be made.I suppose a third option would be real-time validation (ie, display the error after leaving focus of a field that's been incorrectly filled out), but as a user I'm never that happy with how that type of validation "feels".
A "catch-all"
perch:errortag would be awesome.Thanks for listening!
You can add in browser validation, but that's something you'd need to do yourself.
It's worth noting though, whilst the 'any-error' tag would be great, you can currently use the error tags multiple times for the same fields.
So in theory, you could use it to display an error message at the top of the form, plus within the form it's self where the error has occurred.
Whoops – that should have said "a third option on my end". Wasn't meant to be a Perch suggestion.
Funny, Haydn, I had the same realization while making the morning coffee.
My thinking was that the duplicate tags could be fixed to the top of the viewport, rather than the top of the form, using absolute positioning (I think
perch:errortags need to be nested inperch:form), which should work just like I'd suggested for the catch-all tag. In theory I could make sure the warning was always fixed (visually, anyway) to the top of the viewport, and include an anchor link to scroll the user back to the form within the error text (ie - "Something's gone wrong with your form - click to scroll down").Time to put it into practice and see how it goes! As always, thanks for the input.
FYI, I've had a chance to fit in the new <perch:error for="all" type="general"> tag (via Perch 2.5.2 I think?) – it worked brilliantly and completely addressed my original question.
Thanks again!
Great, thanks for letting us know.