perch error in forms not showing

neahan · Feb 5th 2019

The following html from a form has several error tags.

Code

<perch:label for="first-name" class="form__label">First Name
<perch:input type="text" id="first-name" required="true" placeholder="First Name*" label="First Name" class="form__input"/>
<perch:error for="first-name" type="required">Please add a first name</perch:error>
</perch:label>
<perch:label for="last-name" class="form__label">Last Name
<perch:input type="text" id="last-name" required="true" placeholder="Last Name*" label="Last Name" class="form__input"/>
<perch:error for="last-name" type="required">Please add a last name</perch:error>
</perch:label>
<perch:label for="email" class="form__label">Email Address
<perch:input type="email" id="email" required="true" placeholder="Email Address*" label="Email Address" class="form__input"/>
<perch:error for="email" type="required">Please add an email address</perch:error>
<perch:error for="email" type="format">Please check the email address format</perch:error>
</perch:label>
<perch:label for="mobile" class="form__label">Mobile Number
<perch:input type="tel" id="mobile" placeholder="Mobile Number" label="Mobile Number" class="form__input"/>
</perch:label>

Display More

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

drewm · Feb 5th 2019

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 · Feb 5th 2019

ok. Thanks.

JordinB · Feb 5th 2019

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

var myInput = document.getElementById('someid');
myInput.oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("MY INVALID MESSAGE");
}
};

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.

drewm Feb 5th 2019