Входные атрибуты HTML5, доступ через Javascript?

как вы знаете, в спецификации HTML5 мы получили некоторые новые атрибуты для элементов <input>, таких как required и pattern. Это обеспечивает отличный способ проверки пользовательского ввода, и мы можем даже визуализировать его с помощью CSS и псевдоселекторов. Пример

HTML

<input type="number" pattern="\d+" required/>

CSS

input:required:valid {
    border: 1px solid green;
}

input:required:invalid {
    border: 1px solid red;
}

Если этот элемент <input> будет частью элемента <form>, пользователь не сможет отправить его в invalid state.

Однако, мой вопрос: что, если мы хотим использовать эти новые атрибуты без элементов <form>? Есть ли способ получить доступ к текущему состоянию такого <input> node через ECMAscript напрямую?

Любое событие? Любой слушатель?

Ответы

Ответ 1

Как указано @Zirak, существует метод checkValidity, часть API проверки ограничений.

var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false

Однако checkValidity запускает недопустимое событие, если оно недействительно. (Форма будет выделена красным цветом.) Вместо этого вы можете использовать свойство willValidate (или свойство .validity.valid).

Кроме того, свойство validity довольно интересно посмотреть (более подробная информация о том, что означает каждое свойство в API проверки ограничений):

s.validity
    ValidityState
        customError: false
        patternMismatch: false
        rangeOverflow: false
        rangeUnderflow: false
        stepMismatch: false
        tooLong: false
        typeMismatch: false
        valid: false
        valueMissing: true

В этой статье отмечены различия в реализациях между браузерами: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ (т.е. это беспорядок, как обычно.)

Вы также можете прослушать событие invalid, вызванное при отправке формы или при вызове метода checkValidity.

Демо: http://jsfiddle.net/XfV4z/

Ответ 2

Элементы ввода имеют свойство validity:

var i = document.getElementsByTagName('input')[0]
i.validity.valid // True or false

console.log(i.validity);

// Logs (when `1` is entered):

 ValidityState
   customError: false
   patternMismatch: false
   rangeOverflow: false
   rangeUnderflow: false
   stepMismatch: false
   tooLong: false
   typeMismatch: false
   valid: true
   valueMissing: false

Для получения более подробной информации я не буду копировать, отметьте Флориан Маргайн ответ