perch error in forms not showing

  • The following html from a form has several error tags.


    Yet when I try to get an error (see image below) I can only see the default browser error popups.

  • drewm

    Approved the thread.
  • If your browser supports validation then that will happen first. Once the browser has validated the form and it's sent to Perch then Perch will find no errors with it.


    If the browser doesn't support validation, or if the user disables validation in the browser then the Perch validation will go back to being your first line of defence.

  • neahan,


    if you want to try to override the native browser validation messages, look into playing around with the custom validity and onInvalid event handlers:

    Code
    1. var myInput = document.getElementById('someid');
    2. myInput.oninvalid = function (e) {
    3. e.target.setCustomValidity("");
    4. if (!e.target.validity.valid) {
    5. e.target.setCustomValidity("MY INVALID MESSAGE");
    6. }
    7. };

    Browser support is pretty good: https://caniuse.com/#search=setCustomValidity . The only downside i see to this is you're overriding the messages that would normally be displayed in the users default language by something you're set explicitly. So if going that route, why not skip the html5 validation entirely and go with a JS based validation.