我試圖在 Javascript 的幫助下驗證我的 HTML 表單，但即使在提供有效輸入后也會顯示錯誤訊息。如果我添加“preventDefault()”，錯誤訊息只會顯示無效輸入，但無論如何都會提交表單。我的代碼-
HTML
<form id="form" novalidate onsubmit="return validate()">
<label for="firstName">Enter your first name</label><br>
<input type="text" id="firstName" name="firstName" required><br>
<span role="alert" id="nameError" aria-hidden="true"> Please enter a valid name </span>
<label for="lastName">Enter your last name here</label><br>
<input type="text" id="lastName" name="lastName" required><br>
<span role="alert" id="lastNameError" aria-hidden="true"> Please enter a valid name </span>
/*other elements in the form */
錯誤訊息的 Javascript
const firstNameField = document.getElementById("firstName");
const lastNameField = document.getElementById("lastName");
let valid = true;
if (firstNameField.getAttribute(length)<3
|| firstNameField.getAttribute(pattern)!="[A-Za-z ]"
|| lastNameField.getAttribute(length)<3
|| lastNameField.getAttribute(pattern)!="[A-Za-z ]"
{
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute('aria-hidden', false);
nameError.setAttribute('aria-invalid', true);
const lastNameError = document.getElementById("lastNameError");
lastNameError.classList.add("visible");
lastNameField.classList.add("invalid");
lastNameError.setAttribute('aria-hidden', false);
lastNameError.setAttribute('aria-invalid', true);
valid = false;
}
return valid;
}
錯誤訊息的 CSS
#nameError, #lastNameError{
display: none;
font-size: 0.8em;
color: red;
}
#nameError.visible, #lastNameError.visible{
display: block;
}
input.invalid {
border-color: red;
}
我是 Javascript 新手，所以任何建議都會對我有所幫助
uj5u.com熱心網友回復：
另外preventDefault()還要添加，stopPropagation()以防止submit事件冒泡到form并提交它。
uj5u.com熱心網友回復：
您的 if 條件似乎缺少右括號。
還嘗試使用代碼段制作一個可運行的示例，stackoverflow 上的此描述應該會有所幫助
uj5u.com熱心網友回復：
你可以在js中做這樣的事情：
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
console.log('run validation here, return true or false to submit');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486778.html
標籤：javascript html css dom