title: Form validation using Jquery focus and blur method
body: <p>I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.</p>
  
  <p>Can any please help me?</p>
  
  <p><strong>HTML &amp; JS CODE:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;
        Test
      &lt;/title&gt;
      &lt;style type="text/css"&gt;
        .showerror{
          display:block;
        }
        .noshowerror{
          display:none;
        }
        .remerr{
          display:none;
        }
  
        .redborder{
          border:#F00 solid 1px;
          background-color:yellow;
        }
        .greenborder  {
          border:#0F3 solid 1px;
          background-color:#6F6;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div style="width:450px"&gt;
        &lt;div style="float:left"&gt;
          &lt;table&gt;
            &lt;form id="eg"&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Name:
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="text" id="name" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Surname:
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="text" id="surname" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Email:
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="text" id="email" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Number:
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="text" id="number" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Age:
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="text" id="age" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Comment:
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="text" id="comment" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Password
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="password" id="pwd" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;label&gt;
                    Confirm Password
                  &lt;/label&gt;
  
                  &lt;td&gt;
                    &lt;input type="password" id="cnfmpwd" /&gt;
                &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td colspan="2"&gt;
                  &lt;input type="submit" value="test" /&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
  
            &lt;/form&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;div style="float:right"&gt;
          &lt;p id="fail" class="noshowerror" &gt;
            Please enter name
          &lt;/p&gt;
          &lt;p id="nameerr2" class="remerr"&gt;
            Name is correct
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          if ($("#name").val('')) {
  
              $("#name").val('Name Please');
          }
          $('#name').focus(function () {
              if ($('#name').val() == 'Name Please') {
                  $('#name').val("");
              }
  
          });
          $('#name').blur(function () {
              var nameRegex = /^[A-Za-z]+$/;
              var fname = document.getElementById("name").value;
  
              if (!nameRegex.test(fname)) {
                  $("#name").addClass('redborder');
  
              } else if (fname == " ") {
                  $("#name").addClass('redborder');
              } else {
  
                  $("#name").addClass('greenborder');
                  return false;
              }   
          });
      });
  
      &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance</p>