Как использовать пользовательские валидаторы github.com/1000hz/bootstrap-validator

Из документации http://1000hz.github.io/bootstrap-validator/:

Добавьте пользовательские валидаторы для запуска. Валидаторы должны быть функциями, которые получают элемент jQuery в качестве аргумента и возвращают правдивое или ложное значение, основанное на правильности ввода.

Структура объекта: {foo: function($el) { return true || false } }

Добавление валидатора к вводу выполняется так же, как и остальные, data-foo="bar".

Вы также должны добавить сообщения об ошибках по умолчанию для любых настраиваемых валидаторов с помощью опции ошибок.

Я не совсем понимаю, как определить свой собственный валидатор и как его использовать с этим плагином.

Может ли кто-нибудь дать мне простой пример или намек?

3 ответа

Вам нужно вызвать свой плагин вручную, так как параметры custom не будут работать с атрибутами данных:

$().validator({
 custom: {
 'odd': function($el) { return Boolean($el.val() % 2);}
 }
})

то используйте его следующим образом:

Не забудьте добавить сообщения об ошибках см. код


Я хотел более подробно описать ответы здесь.

Я пытался это сделать, используя data-api (помещая data-toggle="validator" в тег формы). Удалив это из моего тега

и включив его с помощью Javascript, моя пользовательская функция работает:
$('#sign-up_area').validator({
 custom: {
 'odd': function($el) { return Boolean($el.val() % 2);}
 },
 errors: {
 odd: "That not an odd number!"
 }
});

Мне также пришлось добавить значение к нечетному атрибуту данных:

<div>
 <div>
 <label for="test">Odd/Even:</label>
 
 
 </div>
</div>

Интересно отметить, что если я добавлю следующий элемент , он имеет приоритет над сообщением об ошибке, объявленным в javascript:

data-odd-error="Not an odd number, yo!"

Однако, я получаю сообщение об ошибке в консоли, если я использую только атрибут data-odd-error, но в Javascript отсутствует сообщение об ошибке. Таким образом, вы должны объявить сообщение об ошибке в Javascript.


Прежде всего добавьте свой собственный валидатор, например:

var validatorOptions = {
 delay: 100,
 custom: {
 unique: function ($el) {
 var newDevice = $el.val().trim();
 return isUniqueDevice(newDevice)
 }
 },
 errors: {
 unique: "This Device is already exist"
 }
 }

Во-вторых, вам нужно "привязать" ввод формы для настраиваемого валидатора, например:

Если вы хотите добавить к этому вводу больше ошибок валидаторов, вы должны добавить пользовательскую ошибку на вход: data-unique-error = "Это устройство уже существует" например:

"Ошибка данных" является ошибкой проверки подлинности по умолчанию и называется "родной", следующий код демонстрирует, как валидатор печатает сообщения об ошибках в соответствии с ключом проверки:

function getErrorMessage(key) {
 return $el.data(key + '-error')
 || $el.data('error')
 || key == 'native' && $el[0].validationMessage
 || options.errors[key]
}

licensed under cc by-sa 3.0 with attribution.