如何在javascript中提交表單后清除錯誤消息
[英]How to clear the error message after submitting a form in javascript
問題描述
嗨伙計下面的編碼是工作正常問題是提交表單后我需要在form的每個文本框的下面禁用錯誤消息。請告訴我如何糾正它....
function asd() { var res = document.forms.myForm.length; flag = true; for (var i = 0; i < res; i++) { if ((document.forms.myForm[i].tagName) != 'Button') { var x = document.forms.myForm[i].value; if (x == "" || x == null) { document.getElementsByClassName("Required")[i].innerHTML = "required"; document.getElementsByClassName("Required")[i].style.color = "red"; document.getElementsByClassName("TagColor")[i].style.border = "1px solid red"; document.getElementsByClassName("TagColor")[i].style.background = "lightblue"; /*flag=false;*/ } else if (x == "text") { document.getElementsByClassName("Required")[i].innerHTML = "qwe"; document.getElementsByClassName("Required")[i].style.color = "green"; document.getElementsByClassName("TagColor")[i].style.border = "1px solid red"; document.getElementsByClassName("TagColor")[i].style.background = "lightblue"; flag = false; } } } var gen = document.getElementsByName("gender"); if ((gen[0].checked == false) && (gen[1].checked == false)) { document.getElementById("WrongMsg").innerHTML = "required"; document.getElementById("WrongMsg").style.color = "red"; flag = false; } var c = document.getElementsByName("chec"); if ((c[0].checked == false) && (c[1].checked == false)) { document.getElementById("ErrorMsg").innerHTML = "required"; document.getElementById("ErrorMsg").style.color = "red"; flag = false; } return flag; }
<!DOCTYPE html> <html> <head> <title>Form Validation</title> <link rel="stylesheet" href="css/form1.css"> </head> <body> <div class="Divstyle"> <h1>Form Validation</h1> <form name="myForm" onsubmit="return asd()" onchange="reset(form)"> FirstName:<input type="text" class="TagColor" name="fname"/><br><span class="Required"></span><br> LastName:<input type="text" class="TagColor" name="lname"/><br><span class="Required"></span><br> Phone Num:<input type="text" class="TagColor" name="phno"/><br><span class="Required"></span><br> Email:<input type="email" class="TagColor" name="email"/><br><span class="Required"></span><br> Select Country: <select class="TagColor"> <option value="">Select</option> <option value="one">INDIA</option> <option value="two">PAKISTAN</option> <option value="three">AUSTRALLIA</option> </select><br><span class="Required"></span><br> Gender: Male:<input type="radio" name="gender"/><br> Female:<input type="radio" name="gender"/><br><span id="WrongMsg"></span><br><br> Language: Tamil:<input type="checkbox" name="chec"><br> English:<input type="checkbox" name="chec"><br><span id="ErrorMsg"></span><br><br> <input type="submit" value="submit" name="submit"> </form> </div> </body> </html>
1 個解決方案
解決方案1
0 2016-06-16 12:34:24
嘗試這個：
在else部分中，對於所需的span標記，將innerHTML設置為空白並使顏色變為透明。
if (x == "" || x == null) {
....
} else if (x != null) {
document.getElementsByClassName("Required")[i].innerHTML = "";
document.getElementsByClassName("Required")[i].style.color = "transparent";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid green";
document.getElementsByClassName("TagColor")[i].style.background = "lightblue";
}
function asd() { var res = document.forms.myForm.length; flag = true; for (var i = 0; i < res; i++) { if ((document.forms.myForm[i].className) == 'TagColor') { var x = document.forms.myForm[i].value; if (x == "" || x == null) { document.getElementsByClassName("Required")[i].innerHTML = "required"; document.getElementsByClassName("Required")[i].style.color = "red"; document.getElementsByClassName("TagColor")[i].style.border = "1px solid red"; document.getElementsByClassName("TagColor")[i].style.background = "lightblue"; flag=false; } else if (x != null) { document.getElementsByClassName("Required")[i].innerHTML = ""; document.getElementsByClassName("Required")[i].style.color = "transparent"; document.getElementsByClassName("TagColor")[i].style.border = "1px solid green"; document.getElementsByClassName("TagColor")[i].style.background = "lightblue"; //flag = false; } } } var gen = document.getElementsByName("gender"); if ((gen[0].checked == false) && (gen[1].checked == false)) { document.getElementById("WrongMsg").innerHTML = "required"; document.getElementById("WrongMsg").style.color = "red"; flag = false; } else { document.getElementById("WrongMsg").innerHTML = ""; } var c = document.getElementsByName("chec"); if ((c[0].checked == false) && (c[1].checked == false)) { document.getElementById("ErrorMsg").innerHTML = "required"; document.getElementById("ErrorMsg").style.color = "red"; flag = false; } else { document.getElementById("ErrorMsg").innerHTML = ""; } return flag; }
<!DOCTYPE html> <html> <head> <title>Form Validation</title> <link rel="stylesheet" href="css/form1.css"> </head> <body> <div class="Divstyle"> <h1>Form Validation</h1> <form name="myForm" onsubmit="return asd()" onchange="reset(form)"> FirstName:<input type="text" class="TagColor" name="fname"/><br><span class="Required"></span><br> LastName:<input type="text" class="TagColor" name="lname"/><br><span class="Required"></span><br> Phone Num:<input type="text" class="TagColor" name="phno"/><br><span class="Required"></span><br> Email:<input type="email" class="TagColor" name="email"/><br><span class="Required"></span><br> Select Country: <select class="TagColor"> <option value="">Select</option> <option value="one">INDIA</option> <option value="two">PAKISTAN</option> <option value="three">AUSTRALLIA</option> </select><br><span class="Required"></span><br> Gender: Male:<input type="radio" name="gender"/><br> Female:<input type="radio" name="gender"/><br><span id="WrongMsg"></span><br><br> Language: Tamil:<input type="checkbox" name="chec"><br> English:<input type="checkbox" name="chec"><br><span id="ErrorMsg"></span><br><br> <input type="submit" value="submit" name="submit"> </form> </div> </body> </html>
提交后如何重新加載、清除或重定向 PHPmailer 表單？
[英]How do I reload, clear or redirect a PHPmailer form after submitting?
提交表單后如何清除字段並在頁面重新加載后顯示表單值
[英]How to clear a field after submitting a form and display the form values after the page reloads
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.