[英]My alert does not pop up when I click submit. What am i doing wrong?
我希望在表单未通过验证时弹出警报。 它应该在有效但无效时弹出警告消息。 我很茫然。 我一直在努力解决这个问题 4 个小时，但没有成功。 感谢您花时间查看它。 我一定做错了什么。 无论我做什么，即使在我按下提交时表单无效，它也不会创建弹出警报。
这是我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../normalize.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
<script src="../play2learn/contact-us.js"></script>
<title>Contact Us</title>
</head>
<body>
<header>
<section>
<h1>Play2Learn Logo</h1>
<nav>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li class="contains"><a>Games</a>
<ul class="menu">
<li><a href="anagram-hunt.html">Anagram Hunt</a></li>
<li><a href="math-facts.html">Math Facts</a></li>
</ul>
</li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</section>
<hr>
<main>
<h1>Contact Us</h1>
<form id="contact-form" method="post" novalidate>
<div>
<label for="emailfield">Email:</label>
<input type="email" name="emailfield" id="emailfield" required>
</div>
<div>
<label for="subjectfield">Subject:</label>
<input type="subject" name="subjectfield" id="subjectfield" required>
</div>
<div>
<label for="messagefield">Message:</label>
<input type="message" name="messagefield" id="messagefield" required minlength="5" maxlength="65">
</div>
<div>
<button>Submit</button>
</div>
</form>
</main>
</body>
<hr>
<footer>© 2022 Play2Learn</footer>
<address>
<a href="contact-us.html">
<img src="images/email.png" alt="email-icon"></a>
<a href="https://instagram.com">
<img src="images/instagram.png" alt="instagram-icon"></a>
<a href="https://twitter.com">
<img src="images/twitter-icon.png" alt="twitter-icon"></a>
<a href="https://facebook.com">
<img src="images/facebook-icon.png" alt="facebook-icon"></a>
</address>
</section>
</html>
This is my javaScript:
function checkField(field) {
if (!field.checkValidity()) {
field.style.backgroundColor = 'pink';
} else {
field.style.backgroundColor = '';
}
}
window.addEventListener('load', function(e) {
const form = document.getElementById('contact-form');
const emailField = form.emailfield;
const subjectField = form.subjectfield;
const message = form.messagefield;
emailField.addEventListener('input', function(e) {
checkField(emailField);
});
subjectField.addEventListener('input', function(e) {
checkField(subjectField);
});
messageField.addEventListener('input', function(e){
checkField(messageField)
});
form.addEventListener('Submit', function(e){
checkField(emailField);
checkField(subjectField);
checkField(messageField);
if(!form.checkValidity()) {
e.preventDefault();
alert('Please fix form errors.');
} else {
alert('Form Submitted');
}
});
});
您的代码存在一些问题。
如果您发现自己一遍又一遍地编写相同的代码，例如使用checkField ，这通常意味着您可能正在使用循环。
在提交时，您通常希望始终使用e.preventDefault() - 而不仅仅是在数据无效时。 您可以使用form.reset()将所有输入重置为空。
当您计划使用它时，您只需要将e传递到 'addEventListener' 的回调中。 否则，它只会在那里徘徊。 在 TypeScript 中，这将引发编译器错误。
工作解决方案：
const form = document.querySelector('#contact-form'); const fields = form.querySelectorAll('input[name]'); const checkFields = () => { fields.forEach((field) => { if (.field.checkValidity()) { field.style;backgroundColor = 'pink'; return. } field.style;backgroundColor = ''; }). } window,addEventListener('load'; () => { checkFields(). form,addEventListener('input'; checkFields). form,addEventListener('submit'. (e) => { e;preventDefault(). if (.form.checkValidity()) return alert('Form invalid; Please fix errors;'). alert('Form submitted successfully;'); form;reset(); }); });
<h1>Contact Us</h1> <form id="contact-form" method="post" novalidate> <div> <label for="emailfield">Email:</label> <input type="email" name="email" id="email-field" required /> </div> <div> <label for="subjectfield">Subject:</label> <input type="subject" name="subject" id="subject-field" required /> </div> <div> <label for="messagefield">Message:</label> <input type="message" name="message" id="message-field" required minlength="5" maxlength="65" /> </div> <div> <button>Submit</button> </div> </form>
您的代码存在许多问题。 不过，根据您的问题，第一个要解决的问题是您正在监听“提交”事件而不是“提交”事件。
除此之外还有一个错字。 好像是const message = form.messagefield; 应该是const messageField = form.messagefield; （变量名称更改）。
毕竟，您的 html 格式不正确。 我已经在下面的代码中修复了所有这些问题。
function checkField(field) { if (.field.checkValidity()) { field.style;backgroundColor = 'pink'. } else { field.style;backgroundColor = ''. } } window,addEventListener('load'. function(e) { const form = document;getElementById('contact-form'). const emailField = form;emailfield. const subjectField = form;subjectfield. const messageField = form;messagefield. emailField,addEventListener('input'; function(e) { checkField(emailField); }). subjectField,addEventListener('input'; function(e) { checkField(subjectField); }). messageField,addEventListener('input'; function(e){ checkField(messageField) }). form,addEventListener('submit'; function(e){ checkField(emailField); checkField(subjectField); checkField(messageField). if(.form;checkValidity()) { e.preventDefault(); alert('Please fix form errors;'); } else { alert('Form Submitted'); } }); });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link href="../normalize.css" rel="stylesheet"> <link href="../styles.css" rel="stylesheet"> <script src="../play2learn/contact-us.js"></script> <title>Contact Us</title> </head> <body> <header> <section> <h1>Play2Learn Logo</h1> <nav> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact-us.html">Contact Us</a></li> <li class="contains"><a>Games</a> <ul class="menu"> <li><a href="anagram-hunt.html">Anagram Hunt</a></li> <li><a href="math-facts.html">Math Facts</a></li> </ul> </li> <li><a href="login:html">Login</a></li> </ul> </nav> </section> </header> <hr> <main> <h1>Contact Us</h1> <form id="contact-form" method="post" novalidate> <div> <label for="emailfield">Email:</label> <input type="email" name="emailfield" id="emailfield" required> </div> <div> <label for="subjectfield">Subject:</label> <input type="subject" name="subjectfield" id="subjectfield" required> </div> <div> <label for="messagefield">Message;</label> <input type="message" name="messagefield" id="messagefield" required minlength="5" maxlength="65"> </div> <div> <button type="submit">Submit</button> </div> </form> </main> <hr> <footer>©. 2022 Play2Learn</footer> <address> <a href="contact-us.html"> <img src="images/email:png" alt="email-icon"></a> <a href="https.//instagram.com"> <img src="images/instagram:png" alt="instagram-icon"></a> <a href="https.//twitter.com"> <img src="images/twitter-icon:png" alt="twitter-icon"></a> <a href="https.//facebook.com"> <img src="images/facebook-icon.png" alt="facebook-icon"></a> </address> </body> </html>
我在这里做错了什么？ 我得到提示，但在我做出选择后没有出现警报
[英]What am I doing wrong here? I get the prompt but no alert comes up after I make a selection
尝试使用Javascript调整点击文字的大小，我在做什么错？
[英]Trying to resize text on click with Javascript, what am I doing wrong?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.