Customize error message from Abide in foundation 6 - forms

Question

I have a simple sign up form with one input tag that is set up for an email. I'm using abide to validate the email. That works, but I would like to create my own error message and to style elements on the page of my choosing. Is this possible?
I found this which I know isn't validating an email input ( I can't seem to find the code that abide is using to validate emails)
abide: {
validators: {
myCustomValidator: function (el, required, parent) {
if (el.value.length <= 3) {
document.getElementById('nameError').innerText = "Name must have more than 3 characters";
return false;
} //other rules can go here
return true;
}
}
I would assume if I am able to set up a custom validator that just mimics what abidie already does (email validation) then I could change all the elements on the page that I wanted to when the validation comes back false.

Answer 1

I'm not sure what exactly you're asking for but checkout the docs http://foundation.zurb.com/sites/docs/abide.html
So it is a little different now in Foundation 6. Once you initiate Foundation, you will have to overwrite certain properties in the Foundation.Abide object. Like this:
Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
Foundation.Abide.defaults.validators['myCustomValidator'] = function($el,required,parent) {
if ($el.value.length <= 3) {
document.getElementById('nameError').innerText = "Name must have more than 3 characters";
return false;
} //other rules can go here
return true;
};
Then in your markup in your form would something like this:
<input id="phone" type="text" pattern="dashes_only" required ><span class="form-error">Yo, you had better fill this out.</span>
<input id="max" type="number" data-validator="myCustomValidator" required><span class="form-error">Yo, you had better fill this out.</span>
You can customize the error messages in the span tags.