CODEWITHSUNDEEP
javascripthtmlvalidation
ghadah
ghadah

Reputation: 13

the validation message does not disappear after adding the right value

I have a login page and I added a validation that whenever the input is empty you can't login, I want the validation message to disappear whenever the user has entered some input. I hope it is clear. here is my code: 

function Validation() {


  var x = document.getElementById("username").value;
  var y = document.getElementById("password").value;


  if (x == "") {

    document.getElementById("demo1").innerHTML = "*please write name";

  } else {
    document.getElementById("demo1").innerHTML = "";
  }

  if (y == "") {


    document.getElementById("demo2").innerHTML = "*please write password";
    return false;
  } else {
    document.getElementById("demo2").innerHTML = "";
  }
}
<div id="form-wrapper">

  <label for="username">UserName </label>
  <input type="text" id="username" name="myuser" /><span class="validation" id="demo1">  </span>
  <br/> <br/>
  <label for="password"> Password  </label>
  <input type="password" id="password" name="mypassword" />
  <span class="validation" id="demo2">  </span>
  <br />

  <input type="submit" id="login" value="Log in" onclick="return Validation()" /> <br />
  <input type="checkbox" checked="checked" /> Remember me


</div>

Upvotes: 1

Views: 107

Answers (1)

Tushar Gupta
Tushar Gupta

Reputation: 15923

You need to call your Validation() function as soon as the user starts typing in the password or username box. You can achieve it by onkeyup event like

<input type="password" id="password" name="mypassword" onkeyup="Validation()" />


function Validation() {
  var x = document.getElementById("username").value;
  var y = document.getElementById("password").value;
  if (x == "") {
    document.getElementById("demo1").innerHTML = "*please write name";
  } else {
    document.getElementById("demo1").innerHTML = "";
  }
  if (y == "") {
    document.getElementById("demo2").innerHTML = "*please write password";
    return false;
  } else {
    document.getElementById("demo2").innerHTML = "";
  }
}
<div id="form-wrapper">

  <label for="username">UserName </label>
  <input type="text" id="username" name="myuser" onkeyup="Validation()"/><span class="validation" id="demo1">  </span>
  <br/> <br/>
  <label for="password"> Password  </label>
  <input type="password" id="password" name="mypassword" onkeyup="Validation()" />
  <span class="validation" id="demo2">  </span>
  <br />
  <input type="submit" id="login" value="Log in" onclick="return Validation()" /> <br />
  <input type="checkbox" checked="checked" /> Remember me
</div>

Upvotes: 2

Related Questions