Настроить сообщение об ошибке от Abide в фундаменте 6

Question

У меня есть простая форма регистрации с одним тегом ввода, который настроен для электронной почты. Я использую соблюдать для проверки электронной почты. Это работает, но я хотел бы создать собственное сообщение об ошибке и стилизовать элементы на странице по своему выбору. Это возможно?

Я обнаружил, что это, как я знаю, не проверяет ввод по электронной почте (кажется, я не могу найти код, который использует abide для проверки писем)

    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;
        }
    }

Я бы предположил, что если я смогу настроить собственный валидатор, который просто имитирует то, что abidie уже делает (проверка по электронной почте), тогда я мог бы изменить все элементы на странице, которые я хотел, когда проверка вернется false.

Answer 1

Я не уверен, что именно вы просите, но посмотрите документы http://foundation.zurb.com/sites/docs/abide.html

Так что теперь немного по-другому в Foundation 6. После того, как вы запустите Foundation, вам придется перезаписать определенные свойства в объекте Foundation.Abide. Как это:

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;
  };

Тогда в вашей разметке в вашей форме будет что-то вроде этого:

<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>

Вы можете настроить сообщения об ошибках в тегах span.