1 回答

TA貢獻1875條經(jīng)驗 獲得超3個贊
HTML 按鈕有一個默認行為,因此它會刷新整個頁面,這就是表單消失的原因。為了防止這種情況,您只需使用event.preventDefault()就像我在下面的提交按鈕事件處理函數(shù)中所做的那樣。
其次,您的 CSS 不適用的原因是您嘗試將“5px Solid”添加到 border-color CSS 屬性中。border-color 只接受顏色作為輸入。如果您需要設置其他屬性,則需要在邊框上進行。
另外,您將 name.value 和 email.value 的值與 0 進行比較。您應該使用空字符串 '' 進行比較。然而,空字符串在 Javascript 中是一個假值,所以即使你只是說 name.value 且 value 是空字符串 (''),那么在 if 條件下它也會是 false。您需要做的就是if(!name.value)即如果 name.value 不為 true,則執(zhí)行條件。
const submitButton = document.getElementById('submitButton');
const name = document.querySelector('#name');
const email = document.querySelector('#email');
function nameValidation() {
if (!name.value) {
name.style.border = '5px solid';
name.style.borderColor = 'red';
}
}
function emailValidation() {
if (!email.value) {
email.style.border = '5px solid';
email.style.borderColor = 'red';
}
}
submitButton.addEventListener('click', e => {
e.preventDefault();
nameValidation();
emailValidation();
});
<form action="index.html" novalidate>
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" />
<label for="mail">Email:</label>
<input type="email" id="email" />
</fieldset>
<button id="submitButton">Register</button>
</form>
添加回答
舉報