bouncer icon indicating copy to clipboard operation
bouncer copied to clipboard

Add `validateOnBlur`, validateOnSubmit` settings and `publicAPIs.showError` and `publicAPIs.removeError`

Open engram-design opened this issue 4 years ago • 0 comments

There's a few things in this PR, so let me know if you'd rather them separate.

validateOnBlur

I know this might be a long-shot, especially given its on of the main draws of this script, but I figure this might be useful to add a validateOnBlur setting, which is default to true. This has no effect on when hitting submit, which validates as normal.

The use-case for me is I'm including this in a CMS plugin allowing end-users to select when to validate as the user types, or not. Simply to give them the option.

I actually agree on-blur is better, based on research, which is why its the default on my plugin. Still, I'd like to option to opt-out of this behaviour.

validateOnSubmit

I know this seems very counter-productive, as this can be used to essentially turn off validation, and that's pretty un-useful for this as a plugin. What this can be useful for is utilising Bouncer's API's for server-side errors, after the fact. Where you could do bouncer.showError(field, { some: 'message' }).

This is purely a nice-to-have setting, because again, I give my users options to use "regular" POST submission, or Ajax submission. I actually want to have the option to disable client-side validation, and only have server-side validation (trust me, I don't condone it - you should use both).

But, I figure this might be useful to have in some other scenarios.

publicAPIs.showError

Tied in with the above, this adds showError to the public API, so we can trigger an error on-demand. Using: bouncer.showError(field, { customMessage: 'Some error.' })

The second part is modifying getErrorMessage() to check to see if we're passing in a customMessage object, and to use that for the error, instead of looking at the messages settings. This error message would come from the server, and as such, might be different from the HTML5 error spec. Its really just a message we want to show on the field.

This is all particularly useful for server-side validation to make use of Bouncer's API's for handling error messages and showing them. Otherwise, we've got to literally duplicate the code to handle adding error elements. With this, its pretty straightforward to target a field, and add a error message to it, with all the niceties Bouncer brings.

I've made this a pass-thru function, rather than re-organising the functions - I figure for the least amount of disruption for you.

publicAPIs.removeError

Tied to the above, this helps remove errors when submitting again.

Let me know if anything isn't up to scratch! I'm more than happy to add in docs and examples as well.

engram-design avatar Jun 12 '20 11:06 engram-design