Псевдоклассы CSS :invalid и :required не работают с методами обхода jQuery, когда селектор соответствует нескольким элементам формы.

HTML

<input required>
<input required>
<input required>

JavaScript

/*
// Add script for noted :invalid check to work
// :required can also be made to work by modifying script, i.e. changing "invalid" to "required" where noted
// Source: http://stackoverflow.com/a/15821264/2171842
jQuery.extend(jQuery.expr[':'], {
    invalid : function(elem, index, match){ // modify pseudo-class here
        var invalids = document.querySelectorAll(':invalid'), // modify pseudo-class here
            result = false,
            len = invalids.length;

        if (len) {
            for (var i=0; i<len; i++) {
                if (elem === invalids[i]) {
                    result = true;
                    break;
                }
            }
        }
        return result;
    }
});
*/
$(document).ready(function(){
  // works
  console.log("number of invalid elements: "+$(":invalid").length); // selector matches multiple elements
  console.log("is first element invalid? "+$("input:first").is(":invalid")); // selector matches one element
  console.log("is at least one element enabled? "+$("input").is(":enabled")); // selector matches multiple elements
  // fails without additional script, :required also fails
  console.log("is at least one element invalid? "+$("input").is(":invalid")) // selector matches multiple elements
  console.log("number of invalid elements: "+$("input:first").siblings(":invalid").andSelf(":invalid").length) // selector (siblings(":invalid")) matches multiple elements
});

Ошибка консоли: Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: invalid. Следуйте комментариям в коде, чтобы ориентироваться в проблеме. Это ошибка или просто неподдерживаемая функция jQuery?

Скрипка

https://jsfiddle.net/cbqdp43s/


person Community    schedule 10.01.2016    source источник


Ответы (1)


Это ошибка или просто неподдерживаемая функция jQuery?

Неподдерживаемые функции. :invalid, :required не являются расширенными селекторами jQuery. См. раздел Категория: расширения jQuery.

Хотя Имеет селектор атрибутов [имя] $("[required]") должен возвращать ожидаемые результаты для элемента с атрибутом required.

См. также :invalid

Псевдокласс CSS :invalid представляет любой элемент <input> или <form>, содержимое которого не проходит проверку в соответствии с настройкой типа ввода.

person guest271314    schedule 10.01.2016
comment
:invalid и :required — это селекторы CSS3, поэтому их не нужно добавлять в качестве расширенных селекторов jQuery. - person ; 10.01.2016
comment
@JairoContreras Каков ожидаемый результат? - person guest271314; 10.01.2016
comment
Кроме того, селектор :invalid выбирает элементы формы со значением, которое не проходит проверку в соответствии с настройками элемента. Сюда входят элементы, отличные от ввода, такие как select и textarea. Источник: w3schools.com/cssref/sel_invalid.asp. - person ; 10.01.2016
comment
@JairoContreras Если добавить атрибут value к элементам input и включить значение в свойство этого атрибута, $(":invalid").length должен вернуть 0 jsfiddle.net /cbqdp43s/11 . Каков ожидаемый результат использования селектора :invalid? - person guest271314; 10.01.2016
comment
см. скрипку и консоль: если вы добавите скрипт, удалив метки комментариев, будет ли хотя бы один элемент недействительным? true и количество недопустимых элементов: 3 - person ; 10.01.2016
comment
если вы добавите сценарий, удалив метки комментариев, будет ли хотя бы один элемент недействительным? true и количество недопустимых элементов: 2 ? Не следишь? Что такое требование? Проверить, не является ли хотя бы один элемент input недопустимым? - person guest271314; 10.01.2016
comment
обязательный ввод, который пуст, недействителен, так же как тип ввода = электронная почта с недопустимым адресом электронной почты недействителен - person ; 10.01.2016
comment
пустой обязательный ввод недействителен, так же как ввод type=email с недействительным адресом электронной почты недействителен Да. Не уверены, какое требование Вопроса? - person guest271314; 10.01.2016
comment
Давайте продолжим обсуждение в чате. - person ; 10.01.2016