我的 javascript 事件监听器不起作用，它仍然提交页面
[英]my javascript event listener doesn't work and it still submits page
问题描述
我在 JavaScript 中有点菜鸟。 我正在尝试验证联系表格，但我的 JavaScript 都没有工作，但我想我的事件监听器是问题，因为我的页面仍然在单击按钮时刷新。 它在控制台中返回错误Uncaught TypeError: Cannot read property 'addEventListener' of null请帮忙！
const form = document.getElementById('form'); const client = document.getElementById('name'); const email = document.getElementById('email'); const message = document.getElementById('text-message'); // Show input error message function showError(input, message) { const formControl = input.parentElement; formControl.className = 'form-control error'; const small = formControl.querySelector('small'); small.innerText = message; } // Show success outline function showSuccess(input) { const formControl = input.parentElement; formControl.className = 'form-control success'; } // Check email is valid function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input); } else { showError(input, 'Email is not valid'); } } // Check required fields function checkRequired(inputArr) { inputArr.forEach(function(input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`); } else { showSuccess(input); } }); } // Get fieldname function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id.slice(1); } // Event listeners form.addEventListener('submit', function(e) { e.preventDefault(); checkRequired([client, email, message]); checkEmail(email); });
.container { display: flex; justify-content: flex-start; flex-direction: column; width: 30rem; padding: 0rem 10rem; }.container.submit-btn { margin-top: 4rem; }.container input { width: 20rem; height: 2rem; background-color: var(--color-blue); border: 1px solid #0652b9; border-color: #0652b9; border-radius: 2.5rem; display: block; color: #161616; text-indent: 15px; }.container input:focus { outline: 0; border-color: #ff8b2c; }.container textarea { width: 20rem; height: 10rem; background-color: var(--color-blue); border: 1px solid #0652b9; border-color: #0652b9; border-radius: 1.5rem; color: #161616; text-indent: 15px; }.container textarea:focus { outline: 0; border-color: #ff8b2c; }.container::placeholder { color: #161616; opacity: 0.5; }.container.form-control { position: relative; }.container.form-control.success input { border-color: green; }.container.form-control.error input { border-color: red; }.container.form-control small { color: red; bottom: 0; left: 0; visibility: hidden; }.container.form-control.error small { visibility: visible; } button { width: 7rem; height: 3rem; background: #0652b9; border-style: none; border-radius: 2.5rem; color: #ffffff; }
<.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../css/main.css" /> </head> <body> <section class="container"> <form action="/" method="GET" id="form" class="form"> <div class="form-control"> <!-- <label for="name">Name</label> --> <input type="text" id="client" placeholder="Your name"> <small>Error message</small> </div> <div class="form-control"> <!-- <label for="email">Email</label> --> <input type="text" id="email" placeholder="Your email"> <small>Error message</small> </div> <div class="form-control"> <!-- <label for="message">Message</label> --> <textarea name="message" id="text-message" rows="7" placeholder="Say something about your project"></textarea> <small>Error message</small> </div> <button class="submit-btn" type="submit">Send message</button> </form> </section> <script src="validation.js"></script> </body> </html>
2 个解决方案
解决方案1
1 2021-03-23 08:22:39
您的变量客户端选择器应该是客户端而不是名称
const form = document.getElementById('form'); const client = document.getElementById('client'); const email = document.getElementById('email'); const message = document.getElementById('text-message'); // Show input error message function showError(input, message) { const formControl = input.parentElement; formControl.className = 'form-control error'; const small = formControl.querySelector('small'); small.innerText = message; } // Show success outline function showSuccess(input) { const formControl = input.parentElement; formControl.className = 'form-control success'; } // Check email is valid function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input); } else { showError(input, 'Email is not valid'); } } // Check required fields function checkRequired(inputArr) { inputArr.forEach(function(input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`); } else { showSuccess(input); } }); } // Get fieldname function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id.slice(1); } // Event listeners form.addEventListener('submit', function(e) { e.preventDefault(); checkRequired([client, email, message]); checkEmail(email); });
.container { display: flex; justify-content: flex-start; flex-direction: column; width: 30rem; padding: 0rem 10rem; }.container.submit-btn { margin-top: 4rem; }.container input { width: 20rem; height: 2rem; background-color: var(--color-blue); border: 1px solid #0652b9; border-color: #0652b9; border-radius: 2.5rem; display: block; color: #161616; text-indent: 15px; }.container input:focus { outline: 0; border-color: #ff8b2c; }.container textarea { width: 20rem; height: 10rem; background-color: var(--color-blue); border: 1px solid #0652b9; border-color: #0652b9; border-radius: 1.5rem; color: #161616; text-indent: 15px; }.container textarea:focus { outline: 0; border-color: #ff8b2c; }.container::placeholder { color: #161616; opacity: 0.5; }.container.form-control { position: relative; }.container.form-control.success input { border-color: green; }.container.form-control.error input { border-color: red; }.container.form-control small { color: red; bottom: 0; left: 0; visibility: hidden; }.container.form-control.error small { visibility: visible; } button { width: 7rem; height: 3rem; background: #0652b9; border-style: none; border-radius: 2.5rem; color: #ffffff; }
<.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../css/main.css" /> </head> <body> <section class="container"> <form action="/" method="GET" id="form" class="form"> <div class="form-control"> <!-- <label for="name">Name</label> --> <input type="text" id="client" placeholder="Your name"> <small>Error message</small> </div> <div class="form-control"> <!-- <label for="email">Email</label> --> <input type="text" id="email" placeholder="Your email"> <small>Error message</small> </div> <div class="form-control"> <!-- <label for="message">Message</label> --> <textarea name="message" id="text-message" rows="7" placeholder="Say something about your project"></textarea> <small>Error message</small> </div> <button class="submit-btn" type="submit">Send message</button> </form> </section> <script src="validation.js"></script> </body> </html>
解决方案2
0 2021-03-23 08:28:10
它被提交，因为那里有一个错误。 只是改变：
const client = document.getElementById('name');
至
const client = document.getElementById('client');
Javascript和AJAX的问题-选择表单的事件监听器在更改时不起作用？
[英]Problems with Javascript & AJAX - Event Listener for select form doesn't work on change?
Javascript 事件监听器更改段落文本 onclick 按钮不起作用？
[英]Javascript Event Listener to change paragraph text onclick of button doesn't work?
JavaScript 事件侦听器的 Function 在嵌套循环外不起作用
[英]JavaScript Event Listener's Function Doesn't Work Outside Nested Loop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.