проверка формы с помощью javascript - event.target.form.classList не определен - css руководство по уловкам - PullRequest
Новая
       94

проверка формы с помощью javascript - event.target.form.classList не определен - css руководство по уловкам

0 голосов
/ 12 апреля 2020

Итак, я следую учебному пособию из CSS -Трюки о проверке формы.

(https://css-tricks.com/form-validation-part-2-constraint-validation-api-javascript/)

Это код, который я копия вставлена ​​с этого сайта. Почему я получаю это сообщение об ошибке в консоли, говорящее «TypeError: event.target.form.classList не определен.»?

И что мне нужно добавить и написать, чтобы сделать это событие определено. Я новичок, и я могу представить, что ответ должен быть простым.

Вот код на данный момент: 

<body>
  <form action="form_process.php" method="post" class="validate">
    <label>Enter Name here:
      <input type="text" name="naaame" value="" required></input>
    </label>
    <label>Enter E-Mail here:
      <input type="email" name="email" value="" required></input>
    </label>
    <label>Enter Number here:
      <input type="number" name="number" value="" required></input>
    </label>
    <label>Enter Date here:
      <input type="date" name="date" value="" required></input>
    </label>
    <button type="submit">Send form</button>
  </form>

  <!-- Scripts from broiler plate not from tutorial -->

  <script src="js/vendor/modernizr-3.8.0.min.js"></script>
  <script src="js/vendor/modernizr-custom.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
  </script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

<!-- Scripts from Tutorial -->
<script>
 var forms = document.querySelectorAll('.validate');
 for (var i = 0; i < forms.length; i++) {
      forms[i].setAttribute('novalidate', true);
 }

 // Listen to all blur events
 document.addEventListener('blur', function (event) {

    // Only run if the field is in a form to be validated
    if (!event.target.classList.contains('validate')) return;

    // Validate the field
    var error = event.target.validity;
    console.log(error);

 }, true);
</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 12 апреля 2020

Итак, для всех, кто прочитал мой вопрос. Я нашел другой способ, который не решил мою проблему. Но я нашел еще одну формуляру проверки полифилла javascript библиотеку , которая работала до браузера IE 9.

Я сейчас использую эту: https://github.com/cferdinandi/bouncer

0 голосов
/ 12 апреля 2020

Вы зарегистрировали событие размытия во всем документе, поэтому следует ожидать такого типа ошибки

. Необходимо проверить, не является ли цель недействительной, поэтому измените 

if (!event.target.classList.contains('validate')) return;

на * 1006. * 

if (event.target && !event.target.classList.contains('validate')) return;
...