这是一个典型的带有文本框的 HTML 表单。我正在寻找通过表单获得的客户端验证，但它没有发生。我确信我做错了什么，但我不知道那是什么。我期待对我的“必需”文本框元素进行实时验证。
现在我有两个按钮，一个用于打开对话框，一个按钮用于关闭它。
我想对提交的数据做一些事情，但我需要首先进行表单验证，所以我还没有为此编写任何逻辑。
编辑：我不知道你是否总是必须这样做，但我添加了两个 CSS 属性，它确实有效，所以，这总是需要的吗？这是我添加到 CSS 文件中的内容
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}
const modal = document.querySelector('.modal');
const openModal = document.querySelector('.open-button');
const closeModal = document.querySelector('.close-button');
openModal.addEventListener('click', () => {
modal.showModal();
});
closeModal.addEventListener('click', () => {
modal.close();
})modal::backdrop {
background: rgb(0 0 0 / .4);
}
.modal {
padding: 1em;
max-width: 50ch;
}
body {
background-color: rgb(215, 137, 28);
}
dialog label {
font-size: 18px;
}
dialog h2 {
margin-top: 10px;
}
dialog text {
width: 100%;
}
dialog input:nth-of-type(3) {
margin-bottom: 20px;
}
.close-button {
margin-bottom: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>An interesting title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet maiores placeat dolorum corporis nihil sapiente cupiditate animi rem ab tenetur facilis ad hic corrupti eligendi, nulla labore, impedit eveniet repudiandae!</p>
<button class="button open-button">open modal</button>
<dialog class="modal" id="modal">
<h2>An interesting title</h2>
<form class="form" method="dialog">
<label>Book Title </label><br><input type="text" required /><br>
<label>Author </label><br><input id="author" type="text" required /><br>
<label>Number of pages </label><br><input id="pages" type="text" required /><br>
</form>
<button class="button close-button">close modal</button>
</dialog>
<script type="module" src="index.js"></script>
</body>
</html>您忘记了提交按钮。
看这篇文章，不用它就可以做到。
并且验证是在提交时发生的，现在您没有验证，因为它没有提交。
通过按 Enter 键提交表单，无需提交按钮