使用javascript进行表单验证-event.target.form.classList未定义-CSS技巧教程

问题描述 投票:0回答:2

所以,我一直遵循CSS-Tricks上有关表单验证的教程。

([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>

javascript undefined typeerror blur formvalidation.io
2个回答
0
投票

您在所有文档上注册了一个模糊事件,因此您必须期待这种类型的错误

您必须检查target是否不为null,所以请更改

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

to

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

0
投票

所以,对于每个阅读我的问题的人。我找到了另一种方法,但不能解决我的问题。但是我发现了另一个表单验证polyfill javascript库直到浏览器IE 9才起作用。

我现在正在使用这个:https://github.com/cferdinandi/bouncer

© www.soinside.com 2019 - 2024. All rights reserved.