当我单击提交时，我的警报不会弹出.我做错了什么

我希望在表单未验证时弹出警报。当它有效但无效时，它应该弹出一条警告消息。我不知所措。我已经修复了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>&copy; 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>&copy; 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>

相关内容

最新更新

热门标签：