Проверка формы Javascript - event.target.validity.valid - PullRequest
Новая
       29

Проверка формы Javascript - event.target.validity.valid

1 голос
/ 06 марта 2019

Впервые в javascript и просто пытается сделать простую проверку формы, где, если пользователь / пароль действителен, граница поля становится зеленой, а если недействительной, она становится красной (на фото) Действительный / Неверный

Вот мой HTML: (Form Works, я думаю, я облажался для слушателей и обработчиков) 

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function(changeStyle)">
</form> 

<script src="Script1.js">
</script>

</body>
</html>

Javascript: 

function valid() {
  var textElements = document.getElementsByTagName('input');
    textElements[i].addEventListener('input', function(changeStyle) {
    if (event.target.validity.valid) {
        textElements[i].style.border = "solid green 2px";
        textElements[i].style.boxShadow = "0 0 5px green";
    } else {
        textElements[i].style.border = "solid red 2px";
        textElements[i].style.boxShadow = "0 0 5px red";
    }
}, false);

}


</script>

Ответы [ 2 ]

0 голосов
/ 06 марта 2019
  1. Вы слушаете событие, которое не существует.Нет такого события, как «ввод», сгенерированный браузером.Вы должны слушать «keyup».
  2. Вы ведете себя так, как будто вы выполняете итерацию (ссылаясь на textElements[i].), но в вашем коде нет цикла итерации.

Итак, я сделал следующее:

  • оберните все это в слушателе, чтобы убедиться, что DOM готов
  • преобразуйте результат из вашего селектора в массив, чтобы мы получилидоступ к удобному методу итератора .forEach с помощью оператора Spread
  • , итерированного по этому массиву, и добавленного слушателя 'keyup' для каждого элемента в массиве.Это означает, что при каждом нажатии и отпускании клавиши слушатель будет запускать

Например, 

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form> 

<script>

document.addEventListener("DOMContentLoaded", function() {
  var textElements = [...document.getElementsByTagName('input')];
  var listen = function(item, index) {
    item.addEventListener('keyup', function(ev){
      if (event.target.validity.valid) {
          item.style.border = "solid green 2px";
          item.style.boxShadow = "0 0 5px green";
      } else {
          item.style.border = "solid red 2px";
          item.style.boxShadow = "0 0 5px red";
      }
    })
  }
  textElements.forEach(listen);
});



</script>

</body>
</html>
0 голосов
/ 06 марта 2019

Я не понял ваш код.Что такое textElement [i], например, но вы можете сделать что-то подобное с JQuery: 

   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form action="/action_page.php">
      <input id = "username" type="text" name="username"  minLength="6" maxlength="10" required>
      <br><br>
      <input id="password" type="text" name="password"  minLength="8" maxlength="15" required>
      <br><br>
      <input type="submit" value="Submit" onclick="">
    </form>
    <script>

    $('#username, #password').on('keyup', function () {

      if($('#password').val().length < 8 ){
         $('#password').css("border-color","#FF0000")
      }else{
        $('#password').css("border-color","#00FFFF")
      }
    });
    </script>

Здесь обработчик keyup будет реагировать на действия клавиатуры по имени пользователя и паролю.В примере, если длина пароля меньше 8, цвет границы ввода будет красным, в противном случае он будет цвета воды

...