Question

嗨伙计下面的编码是工作正常问题是提交表单后我需要在form的每个文本框的下面禁用错误消息。请告诉我如何纠正它.. ..

＆＃13;

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;
}

＆＃13;

    <!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>

＆＃13;

Answer 1

试试这个：

在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>

如何在javascript中提交表单后清除错误消息

1 个答案: