Чи можу я позначити поле як недійсне з 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.