Могу ли я пометить поле как недействительное в javascript?

Прочитав этот пост, я обнаружил, что в HTML5 есть несколько псевдоклассов для «действительных» и «недействительных» входных значений.

Есть ли способ пометить поле ввода как недопустимое / действительное из javascript? Или, в качестве альтернативы, могу ли я переопределить используемый метод проверки?

Для этой цели вы можете использовать функцию customValidity.

Если вы добавите в поле сообщение customValidity, оно станет недействительным. Когда вы устанавливаете сообщение как пустую строку, оно снова становится действительным (если оно не является недействительным по другим причинам).

field.setCustomValidity("Invalid field."); сделает поле недействительным.

field.setCustomValidity(""); сделает поле действительным, если оно не соответствует ограничению HTML5.

Изменить : кто-то пояснил, что вы ищете «действительные» «недопустимые» атрибуты для DOM.

Я бы добавил атрибуты к каждому тегу, используя dom_object.setAttribute("isvalid", "true"). У вас также может быть центральная функция проверки, которая обновляет эти атрибуты каждый раз (и использует dom_object.getAttribute("isvalid")каждый раз).

Вы можете запускать эту функцию каждый раз, когда элемент теряет фокус, или когда захотите.

Не совсем элегантно, но, к сожалению, в настоящее время нет поддержки «псевдо» с javascript и HTML5.

Если я понимаю ваш вопрос, вы можете выполнить проверку с помощью Javascript. Однако имейте в виду, что очень легко обойти проверку на стороне клиента, особенно проверку javascript . Никогда не следует доверять данным клиента и всегда выполнять проверку на стороне сервера.

Например, я мог легко найти идентификаторы элементов, проверив исходный код, а затем document.getElementById('some_id').setAttribute('max', new_number)изменить максимальное значение (это была одна из записей из вашей ссылки).

Есть разные способы сделать это, поэтому я постараюсь дать вам общую идиому.

Вы можете получить значение, выполнив document.getElementById('form_element_id').value(убедитесь, что вы указали форму, nameкоторая отправляется на сервер, и idкоторая используется javascript). Для текстовых полей вы можете использовать .innerHTML.

Тогда у вас есть значение переменной, есть разные способы его проверить.

Например, вы могли бы это сделать if (parseInt(my_value) < 0) //error. Вы также можете использовать регулярные выражения, я не буду все это объяснять, но вы можете начать здесь http://www.w3schools.com/jsref/jsref_obj_regexp.asp . Я знаю, что w3schools - не лучший источник, но я считаю, что это хорошее место для начала.

Теперь о части проверки: добавьте onsubmit="return validateForm()в свой тег формы, где validateForm () - это функция, которая выполняет все проверки. И функция просто возвращает, trueесли она действительна, а в falseпротивном случае. Это отменяет функцию проверки по умолчанию (которая по умолчанию ничего не делает).

Таким образом, в приведенном выше примере //errorбудет заменено на return false. Вы можете делать и другие вещи; например, предупредить об ошибке, затем вернуть false. Вы также можете использовать javascript для выделения недопустимых полей (не уверен, что это то, что вы имеете в виду, говоря « пометить поле ввода как недопустимое / действительное из javascript »)

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

Есть ли способ пометить поле ввода как недопустимое / действительное из javascript?

К сожалению, вы не можете стилизовать псевдоклассы в JavaScript, поскольку они не настоящие элементы, они не существуют в реальной DOM.

С ванильным JavaScript вы должны использовать API проверки .

В jQuery вы можете просто сделать это, http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

Или, в качестве альтернативы, могу ли я переопределить используемый метод проверки?

Если вы используете проверку HTML5, придерживайтесь разметки. В противном случае вы можете отключить проверку HTML5 $form.attr('novalidate', 'novalidate')и использовать JS для проверки ваших полей, а затем добавить классы validили invalidтам, где это необходимо. Я сделал плагин, который работает так, чтобы поддерживать браузеры, отличные от HTML5.