时间戳

首页 > 解决方案 > 如何同时测试表单上的所有输入？

javascript - 如何同时测试表单上的所有输入？

问题描述

当我测试我的输入并将整个表单或两个条目留空时，我只会得到第一个没有用 notValid 类添加填充的输入。我认为这将同时测试所有内容，但只有输入才能获得新课程。任何帮助，将不胜感激。

btn.addEventListener('click', () => {
        if (title.value.length == 0) {
            title.classList.add('notValid');
            e.preventDefault();
        }
        if (author.value.length == 0) {
            author.classList.add('notValid');
            e.preventDefault();
        }
        if (pages.value.length == 0) {
            pages.classList.add('notValid');
            e.preventDefault();
        }
    });

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Library</title>
</head>

<body>
    <button type="text" id='addBookBtn' class='addBookBtn'>Add Books</button>
    <div class="book-container" id='book-container'>
        <h1>add a book</h1>
        <label for="read">Read?</label>
        <input type="checkbox" class='readInput' id='readInput'>
        <label for="title">Title:</label>
        <input type="text" class='title' id='title' placeholder='Add a Title'>
        <label for="author">Author:</label>
        <input type="text" class='author' id='author' placeholder='Add an Author'>
        <label for="pages">Pages:</label>
        <input type="number" class='pages' id='pages' placeholder=' Number of Pages'>
        <button class='btn' id='btn' type="submit">Add</button>
    </div>

    <div class='newBookContainer' id='newBookContainer'></div>


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

</html>

标签： javascripthtmlcss

解决方案

您忘记在 eventListener 中包含事件参数

btn.addEventListener('click', (e) => {}

您可以做的另一件事是避免手动检查输入的各个值，您可以通过添加相似的类名来循环所有输入字段，或者只查询表单内的所有输入字段。此外，拥有如此多的输入，这是将它们添加到内部的好方法form

                              // optional: add the input class for all inputs
<input type="checkbox" class="input readInput" id="readInput" />


const form = document.getElementById('form');
const inputs = form.querySelectorAll('input'); // or query the classnames you've given for all input fields


form.addEventListener('submit', (e) => {
  e.preventDefault();
   
   // or simply use Array.from(inputs).forEach()
   // calling Array.prototype.slice.call will convert NodeLists into Array
   Array.prototype.slice.call(inputs).forEach((el) => {
     if (el.value.length === 0) {
       el.classList.add('notValid');
     } else {
       el.classList.remove('notValid');
     }
   })
});
.notValid {
  border: 1px solid red;
}
<button type="text" id='addBookBtn' class='addBookBtn'>Add Books</button>
  <div class="book-container" id='book-container'>
    <form id="form">
        <h1>add a book</h1>
        <label for="read">Read?</label>
        <input type="checkbox" class='input readInput' id='readInput'>
        <label for="title">Title:</label>
        <input type="text" class='input title' id='title' placeholder='Add a Title'>
        <label for="author">Author:</label>
        <input type="text" class='input author' id='author' placeholder='Add an Author'>
        <label for="pages">Pages:</label>
        <input type="number" class='input pages' id='pages' placeholder=' Number of Pages'>
        <button class='btn' id='btn' type="submit">Add</button>
    
  </form>
   </div>

推荐阅读