Form Validation in Html & Javascript?

Question

I am trying to validate my form with this javascript code, but this code firing the alert in case of any wrong input is entered, but my colleague says there should not be any alert. He says message should be show in front of textfield like below image. can anyone help me, How is it possible ?

My javascript and html code is

<script type="text/javascript">

  function checkForm(form)
  {
    if(form.username.value == "") {
      alert("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("Error: Username must contain only letters, numbers and underscores!");
      form.username.focus();
      return false;
    }

    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(form.pwd1.value.length < 6) {
        alert("Error: Password must contain at least six characters!");
        form.pwd1.focus();
        return false;
      }
      if(form.pwd1.value == form.username.value) {
        alert("Error: Password must be different from Username!");
        form.pwd1.focus();
        return false;
      }
      re = /[0-9]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: password must contain at least one number (0-9)!");
        form.pwd1.focus();
        return false;
      }
      re = /[a-z]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: password must contain at least one lowercase letter (a-z)!");
        form.pwd1.focus();
        return false;
      }
      re = /[A-Z]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: password must contain at least one uppercase letter (A-Z)!");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("Error: Please check that you've entered and confirmed your password!");
      form.pwd1.focus();
      return false;
    }

    alert("You entered a valid password: " + form.pwd1.value);
    return true;
  }

</script>

<form ... onsubmit="return checkForm(this);">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="pwd1"></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

Answer 1

Instead of alert() , you should write your own message display function. First, you need to add that error message container element in your html:

<form ... onsubmit="return checkForm(this);">
  <p>Username: <input type="text" name="username"></p>
  <p>Password: <input type="password" name="pwd1"></p>
  <p>Confirm Password: <input type="password" name="pwd2"></p>
  <p id="error-message-container" color="red"></p>
  <p><input type="submit"></p>
</form>

And in Javascript part, you need to define an error display method which displays this error text inside error-message-container element:

function displayError(msg){
  document.getElementById('error-message-container').innerHTML = msg;
}

Now you are ready to use displayError function instead of alert() , wherever you want to show an error like:

if(!re.test(form.username.value)) {
  displayError("Error: Username must contain only letters, numbers and underscores!");
  form.username.focus();
  return false;
}

Answer 2

What you need is to insert a blank DIV after each input, and your javascript will insert error messages into them:

<script type="text/javascript">

  function checkForm(form)
  {
    if(form.username.value == "") {
      document.getElementById("username_error").innerHTML=("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      document.getElementById("username_error").innerHTML=("Error: Username must contain only letters, numbers and underscores!");
      form.username.focus();
      return false;
    }

    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(form.pwd1.value.length < 6) {
        document.getElementById("pwd1_error").innerHTML=("Error: Password must contain at least six characters!");
        form.pwd1.focus();
        return false;
      }
      if(form.pwd1.value == form.username.value) {
        document.getElementById("pwd1_error").innerHTML=("Error: Password must be different from Username!");
        form.pwd1.focus();
        return false;
      }
      re = /[0-9]/;
      if(!re.test(form.pwd1.value)) {
        document.getElementById("pwd1_error").innerHTML=("Error: password must contain at least one number (0-9)!");
        form.pwd1.focus();
        return false;
      }
      re = /[a-z]/;
      if(!re.test(form.pwd1.value)) {
        document.getElementById("pwd1_error").innerHTML=("Error: password must contain at least one lowercase letter (a-z)!");
        form.pwd1.focus();
        return false;
      }
      re = /[A-Z]/;
      if(!re.test(form.pwd1.value)) {
        document.getElementById("pwd1_error").innerHTML=("Error: password must contain at least one uppercase letter (A-Z)!");
        form.pwd1.focus();
        return false;
      }
    } else {
      document.getElementById("pwd1_error").innerHTML=("Error: Please check that you've entered and confirmed your password!");
      form.pwd1.focus();
      return false;
    }

    document.getElementById("pwd1_error").innerHTML=("You entered a valid password: " + form.pwd1.value);
    return true;
  }

</script>

<form ... onsubmit="return checkForm(this);">
<p>Username: <input type="text" name="username"><div id="username_error"></div></p>
<p>Password: <input type="password" name="pwd1"><div id="pwd1_error"></div></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

Answer 3

I suggest JQuery validation plugin: http://jqueryvalidation.org/

Demo: http://jqueryvalidation.org/files/demo/