Форум

persikova · #1 (**permalink**) 13.07.2017, 17:36

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

<form class="form1">
<input required type="email" name="email" pattern="\S+@[a-z]+.[a-z]+" oninput="validateComments(this)">
</form>

Пытаюсь с помощью js получить значение, пройдена ли эта валидация
<script type="text/javascript">
function validateComments(input) {
console.log(input.prototype.valid);
}
</script>

но при такой записи (как и при всех других моих попытках) получаю undefined.

как получить значение псевдокласса input, :valid/:invalid ?

Dilettante_Pro · #2 (**permalink**) 13.07.2017, 18:39

Косвенная проверка псевдокласса

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:valid</title>
  <style>
   input:invalid {
    background: #fdd; /* Красный цвет фона */
   }
   input:valid {
    background: #dfd; /* Зеленый цвет фона */
   }
  </style>
 </head>
 <body>
  <form>
     <input required type="email" name="email" pattern="\S+@[a-z]+.[a-z]+" oninput="validateComments(this)">
  </form>
<script type="text/javascript">
function validateComments(input) {
   console.log(getComputedStyle(input).backgroundColor);

}
</script>
 </body>
</html>

рони · #3 (**permalink**) 13.07.2017, 19:22

а если так?

console.log(input.validity.valid);

persikova · #4 (**permalink**) 13.07.2017, 19:46

Dilettante_Pro, как вариант, спасибо!

persikova · #5 (**permalink**) 13.07.2017, 19:47

Сообщение от рони

console.log(input.validity.valid);

а вот это именно то, чего хотелось! работает, спасибо!)))

laimas · #6 (**permalink**) 13.07.2017, 20:00

persikova,
все здесь об этом.

Dilettante_Pro · #7 (**permalink**) 14.07.2017, 10:09

Сообщение от рони

console.log(input.validity.valid);

Да, надо HTML5 внимательнее изучать...

Форум

Справочник

Discord чат

Курсы javascript