html - Validating Form Data and Displaying Graphics with JavaScript -

I have not really used JavaScript before, but I am trying to validate the form elements because they are filled Are there. I have an X and a check mark that I am trying to show next to the field to display whether it is valid or not. I know that this is partly correct because I can use a warning, but I'm not sure how to change the fields of graphics.

Javascript:

  function validate_field (field) {var value = document.newAccount.fname; If (value == zero; value == "") {document.fnameX.visibility = visible; Document.fnameOK.viewability = Hidden; // warning ("unsuccessful"); return false; } Other {document.fnameX.visibility = hidden; Document.fnameOK.visibility = visible; // warning ("true"); Back true; }}  

Some HTML:

  & lt; Form action = "xxxxx" method = "post" name = "newAccount" & gt; & Lt; Table width = "78%" range = "0" align = "center" & gt; & Lt; TR & gt; & Lt; Td colspan = "2" & gt; & Lt; Strong & gt; Personal info: & lt; / Strong> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td width = "24%" & gt; & Lt; Div align = "right" & gt; First name: & lt; / Div & gt; & Lt; / Td> & Lt; TD width = "76%" & gt; & Lt; Input type = "text" onchange = "return validate_field (this)" onfocus = "return validate_field (this)" name = "fname" tabindex = "1" size = "50" /> & Lt; Img name = "fnameX" src = "redx.jpg" style = "visibility: hidden" alt = "x" width = "18" height = "18" /> gt; & Lt; Img name = "fnameOK" src = "Checkmark.jpg" style = "visibility: hidden" alt = "ok" width = "18" height = "18" /> gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> & Lt; Div align = "true" & gt; Last name: & lt; / Div & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = "text" name = "lname" tabindex = "2" size = "50" /> gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Form & gt;  

It is possible to use CSS classes for something like that.

. Valid (padding-right: 15px / *) or the width of your graphic * / background: url ('checkmark.jpg') center is not correct-repeat; / * Remember that the URL is relative to the stylesheet. /}. Valid (padding-right: 15px background: url ('redx.jpg') center is not correct-repeat;}

Then your valid work is done:

  function validate_field (field) {var value = field.value; if (value == faucet} value == "") {field.parentNode.className = 'invalid'; description is false;} other {field. ParentNode.className = 'valid'; return true; Keep in mind the entry, keep in mind that unless you are using a warning or using the accessibility facility, Users are going hard times with your form.  
  Edit:   
 An example of your code where I change the background of the form input Color of the original table cell.  
  Edit:   
 And this is an example where I got rid of those layout tables and gave them a  Fieldet with , and modified javascript in a bit. If you are not familiar with jsbin , You can add  / edit  in the url to view / modify the code.