所以,我一直遵循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>
您在所有文档上注册了一个模糊事件,因此您必须期待这种类型的错误
您必须检查target是否不为null,所以请更改
if (!event.target.classList.contains('validate')) return;
to
if (event.target && !event.target.classList.contains('validate')) return;
所以,对于每个阅读我的问题的人。我找到了另一种方法,但不能解决我的问题。但是我发现了另一个表单验证polyfill javascript库直到浏览器IE 9才起作用。
我现在正在使用这个:https://github.com/cferdinandi/bouncer