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

Question

我有一個文本框，我用JS來查看檢查文本框是否爲空。 如果它是空的，錯誤信息將出現在文本框下。

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

<label for="last_name_field">Last Name <abbr title="Required">*</abbr></label> 
 
\t   \t \t <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'; 
}