Question

在我提供的这个HTML表单中，我想警告用户他必须在输入框中输入一个级别，如果他再次单击该按钮，我想清除错误消息并再次打印出来。我还想添加更多错误消息，但我添加的任何错误消息都附加到上一条消息的末尾。

function validateForm () {
    var msg = ""
      , result = true;

    if (document.ExamEntry.name.value === "") {
        msg = document.createTextNode("You Must Indicate Your Level");
        document.getElementById('name-msg').appendChild(msg);
        document.getElementById('name-msg').style.color="red";
    }
}

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name">
    <span id="name-msg"></span>
    <input type="button" name="submit" value="Submit" onclick="validateForm();">
</form>

这是一个jsbin

Answer 1

这是你在寻找什么？

function validateForm(){

    var result = true;
    var msg = "";
    if(document.ExamEntry.name.value===""){
        msg = document.createTextNode("You Must Indicate Your Level");
        var span = document.getElementById('name-msg');
        while( span.firstChild ) {
            span.removeChild( span.firstChild );
        }
        span.appendChild(msg)
        document.getElementById('name-msg').style.color="red";
    } else {
        var span = document.getElementById('name-msg');
        while( span.firstChild ) {
            span.removeChild( span.firstChild );
        }
    }
}

<form name="ExamEntry" method="POST">

    <input type="text" id="name" name="name" /><span id="name-msg">             </span>

    <input type="submit" name="submit" value="Submit"        onclick="validateForm();" />

</form>

Answer 2

function validateForm () {
    var result = true;

    if (document.ExamEntry.name.value === "") {
      document.getElementById('name-msg').innerHTML= "You Must Indicate Your Level";
        document.getElementById('name-msg').style.color="red";
    }
}

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name">
    <span id="name-msg"></span>
    <input type="button" name="submit" value="Submit" onclick="validateForm();">
</form>

Answer 3

您可以清除html，如

＆＃13;

<form name="ExamEntry" method="POST">

  <input type="text" id="name" name="name" /><span id="name-msg"></span>

  <input type="button" name="submit" value="Submit" onclick="validateForm();" />

</form>

＆＃13;

Interest    Age     Gender  Scored.Probabilities
AL008       18-24   male    0.211
AL024       25-34   male    0.022
AL008       35-44   female  0.102
AL008       25-34   female  0.002
AL024       13-17   male    0.102
AL035       35-44   female  0.027
AL024       35-44   female  0.051
AL024       55-64   male    0.025
AL024       35-44   male    0.016
AL034       45-54   male    0.021
AL036       35-44   male    0.082

＆＃13;

Answer 4

您可以使用innerHTML：

function validateForm() {
  var msg = "",
    result = true;
  if (document.ExamEntry.name.value === "") {
    msg = "You Must Indicate Your Level";
  }
  document.getElementById('name-msg').innerHTML = msg;
}

#name-msg {
  color: red;
}

<form name="ExamEntry" method="POST">
  <input type="text" id="name" name="name">
  <span id="name-msg"></span>
  <br/>
  <input type="button" name="submit" value="Submit" onclick="validateForm();">
</form>

清除错误消息，而不是使用javascript附加

4 个答案: