Плагин проверки jQuery - правило «Обязательно» ведет себя странно

Я использую этот плагин проверки jQuery (jquery-validate) в сочетании с Bootstrap, и я уже сделал 5 форм с ним и с большим трудом.

Теперь у меня есть этот JSFiddle, но мое поле пароля ведет себя странно...
Как видите ли, я установил правило required для пароля, как и для всех. Если я удалю все маркеры в своем браузере и перейду к следующему полю, оно останется нетронутым, если оно уже помечено как правильное, оно останется правильным, если вообще не помечено, останется без пометки. Оно не помечено как неправильное, и сообщение об ошибке не появляется!

Я могу получить сообщение об ошибке правила required, только если сначала создам ошибку minlength в поле пароля, а затем затем удалю все символы, или нажав кнопку отправки ( доступно, только если все поля не находятся в состоянии ошибки).

После долгих проверок я нашел вариант onfocusout. Это может быть либо true, либо false, по умолчанию установлено значение true. Как указано на веб-сайте,

[Это] Проверка элементов [s] (кроме флажков/переключателей) при размытии. Если ничего не введено, все правила пропускаются, за исключением случаев, когда поле уже было помечено как недействительное.

Это наверняка было причиной, подумал я. Но после долгого гугления выяснилось, что такой проблемы больше ни у кого не было (по крайней мере, из-за правила onfocusout). В одном посте упоминалось, что «правило required является исключением» (из правила onfocusout?).

Итог: Я не могу заставить мою ошибку правила required работать, за исключением отправки или первого создания сообщения об ошибке minlength. Тогда она появляется.
Вывод. Ошибка может быть выдана, но не на blur.
Вопрос. Как это исправить?

Поле ввода моего пароля

<input type="password" class="form-control" id="passw" name="passw" value="nochange" maxlength="20" required="required" placeholder="123456789" />

Мои правила пароля

passw: {
    required: true,
    minlength: 5,
    maxlength: 20
},

Я добавил console.log сообщений, когда ошибка должна была быть размещена - даже не вызвана. Я проверил свой код и HTML, перепроверил все три раза, но до сих пор не могу найти ошибку...


jquery jquery-validate required
person Isaiah    schedule 27.02.2014    source источник
comment
Это происходит из-за того, что вы указываете значение еще до запуска правил, и если вы уберете все заранее определенные значения, проверки будут работать правильно.... jsfiddle.net/638fu/5   -  person Daniel Esponda    schedule 27.02.2014
comment
@jeremy Понятно ... Однако мне нужны эти заранее определенные значения. Я только что попробовал это с установкой этих значений через jQuery, та же проблема. Но это сближает меня, хотя и не совсем идеально.   -  person Isaiah    schedule 27.02.2014
comment
Вы правы ... вам, возможно, придется установить значения и переориентировать, чтобы заставить это работать, может быть лучшее решение, которое не так хакерски   -  person Daniel Esponda    schedule 27.02.2014

Ответы (1)


arrow_upward
2
arrow_downward

Цитирую OP:

«Я не могу заставить мою требуемую ошибку правила работать, за исключением отправки или первого создания сообщения об ошибке минимальной длины. Затем оно появляется… Я проверил свой код и HTML, трижды проверил все, но я все еще не могу найти ошибку"

Это не ошибка. Это называется «ленивой» проверкой и является поведением по умолчанию.

Документация:

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

Цитирую OP:

«После долгих проверок я нашел вариант onfocusout. Это может быть либо true, либо false, по умолчанию установлено значение true, как указано на веб-сайте»

Не совсем. onfocusout по умолчанию активен; вы не можете установить его на true, не сломав плагин. Вы можете только установить его на false (чтобы отключить его) ИЛИ вы можете переопределить его своей собственной функцией.

Документация:

"Установите функцию, чтобы самостоятельно решить, когда выполнять проверку. Булево значение true не является допустимым значением."

Измените параметр обратного вызова onfocusout для более «нетерпеливой» проверки, чтобы все проверки срабатывали сразу после выхода из поля.

$('#yourform').validate({
    // your rules & options,
    onfocusout: function (element, event) {
        this.element(element);  // eager validation
    }
});

ДЕМО: jsfiddle.net/p4K7S/

Для более полной проверки "Eager" сделайте то же самое для функции обратного вызова onkeyup, и проверка начнется, как только начнется ввод текста в поле.

$('#yourform').validate({
    // your rules & options,
    onfocusout: function (element, event) {
        this.element(element);  // eager validation
    },
    onkeyup: function (element, event) {
        this.element(element);  // eager validation
    }
});

ДЕМО 2: jsfiddle.net/em0uspk3/

Зачем вам все еще нужен onfocusout при использовании onkeyup? Потому что во время взаимодействия пользователя с радио, флажками и элементами выбора нет событий нажатия клавиш.

person Sparky    schedule 27.02.2014
comment
Некоторое объяснение того, почему это поведение по умолчанию: ... оно предназначено для ненавязчивого взаимодействия с пользователем, как можно меньше раздражая пользователя ненужными сообщениями об ошибках (из документации). Возможно, OP рассмотрит возможность не проверять эти поля на blur с учетом этого./ - person Andrew Whitaker; 27.02.2014
comment
Спасибо @AndrewWhitaker за напоминание. Я добавил это к ответу. - person Sparky; 27.02.2014
comment
Спасибо, ваша идея работает! Я знал, что вы не можете установить onfocusout в true, мой плохой, я просто имел в виду, что он уже активирован по умолчанию. Также я понимаю, что это поведение не является ошибкой, но мне все равно нужно было немедленно предупредить пользователя в связи с обстоятельствами (вы не можете оставлять поле пустым). - person Isaiah; 28.02.2014
comment
Хм, а что делает this.element(element);? - person Isaiah; 28.02.2014
comment
@Isaiah, это метод validator.element(), который проверяет переданный в него элемент. В этом случае this.element() представляет validator.element(), а переданное в него ключевое слово element представляет проверяемое поле. - person Sparky; 28.02.2014