title: using javascript onblur event for 1 row at a time
body: <p>Hey guys I am curious if I am able to change the form I have now to work one line at a time.
  To start, this is the table I have.</p>
  
  <p>Table:</p>
  
  <pre><code>&lt;form name="form1" action="submit.php" method='POST'&gt;
      &lt;table border="0" class="signUp"&gt;
      &lt;tr&gt;&lt;td align="center" class= "signUpfont"&gt; Sign up for FREE &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" text="First Name" class='signUpinput' id="fname" name="fname" placeholder="First Name" onblur="validate();" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;label id = "fnamelabel"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" class='signUpinput' id="lname" name="lname" placeholder="Last Name" onblur="validate();" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;label id = "lnamelabel"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" class='signUpinput' id="email" name="email" placeholder="Email" onblur="validate();" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;label id = "emaillabel"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" class='signUpinput' id="email2" name="email2"  placeholder="Re-enter Email" onblur="validate();" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;label id = "email2label"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="password" class='signUpinput' id="pass" name="pass" placeholder="Password" onblur="validate();" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;label id = "passlabel"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="submit" name="submit" value="Sign Up" style="color:white; background-color:#2B4478; width: 100px;margin-left: 52px;"&gt;&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>This is my javascript:</p>
  
  <pre><code>    function validate()
  {
  var fname = document.getElementById("fname").value;
  var lname = document.getElementById("lname").value;
  var email = document.getElementById("email").value;
  var email2 = document.getElementById("email2").value;
  var pass = document.getElementById("pass").value;
  
  var fname_reg = /^\w*$/;
  var lname_reg = /^\w*$/;
  var email_reg = /\w+\@\w+\.\w{1,3}/;
  var pass_reg = /^\w*$/;
  
  if(!fname_reg.test(fname) || fname == "")
  {
  document.getElementById("fnamelabel").innerHTML = '&lt;img src="images/redcheckmark.png" height="25" width="25" /&gt;';
  }else{
  document.getElementById("fnamelabel").innerHTML = '&lt;img src="images/checkmark.png" height="25" width="25" /&gt;';
  }
  
  if(!lname_reg.test(lname) || lname == "")
  {
  document.getElementById("lnamelabel").innerHTML = '&lt;img src="images/redcheckmark.png" height="25" width="25" /&gt;';
  }else{
  document.getElementById("lnamelabel").innerHTML = '&lt;img src="images/checkmark.png" height="25" width="25" /&gt;';
  }
  
  if(!email_reg.test(email) || email == "")
  {
  document.getElementById("emaillabel").innerHTML = '&lt;img src="images/redcheckmark.png" height="25" width="25" /&gt;';
  }else{
  document.getElementById("emaillabel").innerHTML = '&lt;img src="images/checkmark.png" height="25" width="25" /&gt;';
  }
  
  if(!email_reg.test(email2) || email2 != email || email2 == "")
  {
  document.getElementById("email2label").innerHTML = '&lt;img src="images/redcheckmark.png" height="25" width="25" /&gt;';
  }else{
  document.getElementById("email2label").innerHTML = '&lt;img src="images/checkmark.png" height="25" width="25" /&gt;';
  }
  
  if(!pass_reg.test(pass) || pass == "")
  {
  document.getElementById("passlabel").innerHTML = '&lt;img src="images/redcheckmark.png" height="25" width="25" /&gt;';
  }else{
  document.getElementById("passlabel").innerHTML = '&lt;img src="images/checkmark.png" height="25" width="25" /&gt;';
  }
  
  }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Soo.. as of right now when I lose focus of the first input (first name).  It fills all of the boxes with a red checkmark because they are all empty.  Is there anyway I can make this event happen for only that one line that is losing focus at a time and have the rest with no green checkmark or red until it has been attempted to be filled?</p>