CODEWITHSUNDEEP
javascripthtml
VaTo
VaTo

Reputation: 3088

Clear out an error message instead of appending with javascript

In this HTML form that I have I would like to warn the user that he has to enter a level in the inputbox, if he clicks the button again I would like to clear off the error message and print it out again. I would like to also add more error messages but anything that I add as an error message appends to the end of the previous message. 

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>

here's a jsbin

Upvotes: 0

Views: 1719

Answers (4)

Darian
Darian

Reputation: 348

Is this what are you looking for?

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>

Upvotes: 2

user2575725
user2575725

Reputation:

You may possibly use 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>

Upvotes: 0

Don Lee
Don Lee

Reputation: 463

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>

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388406

You can clear the html like

function validateForm() {

  var result = true;

  var msg = "";


  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";
  } else {
    document.getElementById('name-msg').innerHTML = '';
  }




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

Upvotes: 0

Related Questions