title: javascript Validation Help a total newbie
body: <p>I Cannot get the javascript to work! I need the <code>Password</code> and <code>Re-Type Password</code> fields, validate that both have values and that the user has entered the same password in both fields (i.e. password match) validate the password field must be more than 8 characters.I dont want to use the alert function instead, highlight the uncompleted fields with red background and a text message next to each uncompleted field (in red color) with the error message.</p>
  
  <p>I have spent 3 days doing this!! any help appreciated.`    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function validate() {
     var fn =
       document.getElementById("FName");
     if (fn.value == "") {
  
       {
         document.getElementById("FName").style.borderColor = "red";
         return false;
  
       }
       return true;
     }
  
     function validate() {
       var sn =
         document.getElementById("SName");
       if (sn.value == "") {
         document.getElementById("SName").style.borderColor = "red";
         return false;
  
       }
       return true;
     }
  
     function validate() {
       var un =
         document.getElementById("UName");
       if (un.value == "") {
         document.getElementById("UName").style.borderColor = "red";
         return false;
  
       }
       return true;
     }
  
     function checkPass() {
       var pass = document.getElementById('pass');
       var c_pass = document.getElementById(' c_pass')
       var message = document.getElementById('confirmMessage');
       var goodColor = "#66cc66";
       var badColor = "#ff6666";
  
       if (pass.value == c_pass.value) {
  
         c_pass.style.backgroundColor = goodColor;
         message.style.color = goodColor;
         message.innerHTML = "Passwords Match!"
       } else {
  
         c_pass.style.backgroundColor = badColor;
         message.style.color = badColor;
         message.innerHTML = "Passwords Do Not Match!"
  
       }
       return true;
     }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;form action="Linkpage.html" id="myForm" method="post" name="myForm" onsubmit="return(validate())"&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td align="center" colspan="2"&gt;&lt;span style="font-size:50px; color:blue;"&gt;Registration form&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td align="center" colspan="2"&gt;Welcome to our website
          &lt;br&gt;please fill in &lt;span style=" color:red;"&gt;all&lt;/span&gt;
          &lt;b&gt;&lt;ins&gt;fields&lt;/ins&gt;&lt;/b&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First Name&lt;/td&gt;
        &lt;td&gt;
          &lt;input autofocus="" id="FName" placeholder="Enter First name " type="text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Last Name&lt;/td&gt;
        &lt;td&gt;
          &lt;input id="SName" placeholder="Enter Last name " type="text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Username&lt;/td&gt;
        &lt;td&gt;
          &lt;input id="UName" placeholder="Enter username " type "text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Age&lt;/td&gt;
        &lt;td&gt;
          &lt;input id="Age" placeholder="Enter age" type="text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Password&lt;/td&gt;
        &lt;td&gt;
          &lt;input id="pass" placeholder="Enter password " type="password"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Confirm Password&lt;/td&gt;
        &lt;td&gt;
          &lt;input name="confirm password" id="c_pass" placeholder="Re-type your           password " type="password" onkeyup="checkPass(); return false;"&gt;
          &lt;span id="confirmMessage" class="confirmMessage"&gt;&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td rowspan="2"&gt;Gender&lt;/td&gt;
        &lt;td&gt;
          &lt;input name="mGender" type="radio" value="Male"&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input name="fGender" type="radio" value="Female"&gt;Female&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Available&lt;/td&gt;
        &lt;td&gt;
          &lt;input id="checkbox" type="checkbox"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Course&lt;/td&gt;
        &lt;td&gt;
          &lt;select&gt;
            &lt;option value="Mobile App"&gt;
              Mobile App
            &lt;/option&gt;
            &lt;option value="Cloud"&gt;
              Cloud
            &lt;/option&gt;
            &lt;option value="Software Development"&gt;
              Software Development
            &lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="Comments"&gt;Comments&lt;/td&gt;
        &lt;td&gt;
          &lt;br&gt;
          &lt;textarea cols="30" name="Comments" placeholder="Type your comments here." rows="6"&gt;&lt;/textarea&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td align="center" colspan="4" align="center"&gt;
          &lt;input name="submit" onclick="return validate()" type="submit" value="Register" align="center" /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
    </p>