Customize error message from Abide in foundation 6

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.

score 0 · Answer 1 · answered Feb 25 '16 at 22:15

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.

Customize error message from Abide in foundation 6

1 Answers1