我想重新设计 HTML5 中的默认验证。我在帮助下完成此操作https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation（示例开始现在让我们看看实现自定义错误验证的 JavaScript。）
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" asp-append-version="true">
<script src="../src/script.js"></script>
</head>
<body>
<form asp-controller="Cards" asp-action="Create" method="post" class="cards" id="deckForm">
<div class="card mt-6">
<div class="header d-flex justify-content-between p-3">
<h4 class="card-counter">1</h4>
<a class="button-bin btn" id="firstCard" ></a>
</div>
<div class="card-body row">
<div class="term col">
<h3>Term</h3>
<input class="form-control w-100" name="term" required>
<span class = "error"></span>
</div>
<div class="definition col">
<h3>Definition</h3>
<input class="form-control w-100" name="definition" required>
<span class = "error"></span>
</div>
</div>
</div>
<button type="submit" id="create-cards" class="btn btn-primary mt-2">Create</button>
</form>
<button class="new-card w-100 d-flex justify-content-center align-items-center mt-4 mt-s rounded-2" style="height: 5rem" type="button">
<h3>+ Add card</h3>
</button>
</body>
</html>
JS
let currentCardNumber = 1;
function addCard() {
currentCardNumber++;
let newCardHTML = `
<div class="header d-flex justify-content-between p-3">
<h4 class="card-counter">${currentCardNumber}</h4>
<a class="button-bin btn" id = "bin${currentCardNumber}"></a>
</div>
<div class="card-body row">
<div class="term col">
<h3>Term</h3>
<input class="form-control w-100" name = "term" required>
</div>
<div class="definition col">
<h3>Definition</h3>
<input class="form-control w-100" name="definition" required>
</div>
</div>
</div> `;
let newCard = document.createElement('div');
newCard.classList.add('card');
newCard.classList.add('mt-3');
newCard.innerHTML = newCardHTML;
let addNewCard = document.querySelector('.cards');
let referenceNode = document.getElementById('create-cards');
addNewCard.insertBefore(newCard, referenceNode);
saveCardsHTML();
}
const errorTerm = document.querySelector('.term .error');
function showError(element) {
if (element.validity.valueMissing) {
errorTerm.textContent = 'You need to enter an e-mail address.';
}
errorTerm.className = "error active";
}
document.addEventListener('DOMContentLoaded', function () {
"use strict";
let newCard = document.querySelector('.new-card');
newCard.addEventListener('click', function () {
addCard();
});
const term = document.querySelector('input[name="term"]');
term.addEventListener("input", function (event) {
if (term.validity.valid) {
errorTerm.textContent = "";
errorTerm.className = "error";
} else {
showError();
}
});
let deckForm =document.getElementById('deckForm');
deckForm.addEventListener('submit', function (event) {
event.preventDefault();
if(!term.validity.valid){
showError(term);
event.preventDefault();
}
else{
saveCardDataToServer();
}
});
});
如果我想从
document.addEventListener('DOMContentLoaded', function () const term = document.querySelector('input[name="term"]');
term.addEventListener("input", function (event) {
if (term.validity.valid) {
errorTerm.textContent = "";
errorTerm.className = "error";
} else {
showError();
}
});
let deckForm =document.getElementById('deckForm');
deckForm.addEventListener('submit', function (event) {
event.preventDefault();
if(!term.validity.valid){
showError(term);
event.preventDefault();
}
else{
saveCardDataToServer();
}
});
我无法添加卡。如果我返回代码，卡片就会添加。
这是因为当 Javascript 尝试查找元素时，您在 Javascript 中查找的元素尚不存在于 DOM 中。
您可以通过向标签添加 defer 属性来轻松解决这个问题。 像这样：
<script defer src="../src/script.js"></script>
现在您不再需要等待 DOMContentLoaded。