javascript 驗證：通過文本框刪除錯誤消息

Question

我有一個文本框，我用 JS 來檢查文本框是否為空。 如果為空，則文本框下方將出現錯誤消息。

現在，當我返回並在空文本框中輸入文本時，錯誤消息仍然存在。 如何重新檢查用戶是否輸入了任何文本，然后自動刪除錯誤鏈接。

 <label for="last_name_field">Last Name <abbr title="Required">*</abbr></label> <input type="text" id="last_name_field" name="lastname" placeholder="Last Name" onblur="validateLN()">

 function validateLN() { if (document.form.lastname.value == "") { //create an error message var msg = " Last Name cannot be blank"; //call the display error function displayError(document.form.lastname, msg); } } function displayError(element, msg) { if (element.nextSibling.tagName == "SPAN" && element.nextSibling.textContent.trim == msg.trim) { return; } else { var msgElement = document.createElement("span"); msgElement.textContent = msg; msgElement.style.color = "red"; element.parentNode.insertBefore(msgElement, element.nextSibling); element.style.border = "solid 1px red"; } }

Answer 1

從文本框的onchange事件中刪除錯誤。

function validateLN() {
    if (document.form.lastname.value == "") { //create an error message
        var msg = " Last Name cannot be blank";
        //call the display error function
        displayError(document.form.lastname, msg);
    }
}

document.form.lastname.onchange = function() {
    document.getElementById('errorMsg').remove();
}

function displayError(element, msg) {
    if (element.nextSibling.tagName == "SPAN" && element.nextSibling.textContent.trim == msg.trim) {
        return;
    } else {
        var msgElement = document.createElement("span");
        msgElement.id = 'errorMsg';
        msgElement.textContent = msg;
        msgElement.style.color = "red";
        element.parentNode.insertBefore(msgElement, element.nextSibling);
        element.style.border = "solid 1px red";
    }
}

或者簡單地將其保留在那里並切換其display值：

var msgElement = document.createElement("span");
msgElement.id = 'errorMsg';
msgElement.textContent = msg;
msgElement.style.color = "red";
msgElement.style.display = 'none';
element.parentNode.insertBefore(msgElement, element.nextSibling);
element.style.border = "solid 1px red";

function validateLN() {
    if (document.form.lastname.value == "") { //create an error message
        var msg = " Last Name cannot be blank";
        //call the display error function
        document.getElementById('errorMsg').style.display = 'inline';
    }
}

document.form.lastname.onchange = function() {
    document.getElementById('errorMsg').style.display = 'none';
}