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

Question

When I test my inputs and leave the whole form or two entries blank, I only get the first input not filled in with the class add of notValid.当我测试我的输入并将整个表单或两个条目留空时，我只会得到第一个没有用 notValid 的 class 添加填充的输入。 I would think this would test everything at the same time but only input will get the new class.我认为这将同时测试所有内容，但只有输入会得到新的 class。 Any help would be appreciated.任何帮助，将不胜感激。

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

Answer 1

You forgot to include the event param in you eventListener您忘记在 eventListener 中包含事件参数

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

Another thing you could do to avoid checking for individual values of inputs manually, you can loop through all input fields by adding them similar classnames or just query all the input fields inside form.您可以做的另一件事是避免手动检查输入的单个值，您可以通过添加相似的类名来遍历所有输入字段，或者只查询表单内的所有输入字段。 Also, Having such number of inputs, it's a good way to add them inside form此外，拥有如此多的输入，这是在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>

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

问题描述

1 个解决方案

解决方案1
0 2021-02-11 01:48:08

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

问题描述

1 个解决方案

解决方案1 0 2021-02-11 01:48:08

解决方案1
0 2021-02-11 01:48:08