Question

I am new to web programming and scripting; i have a requirement in which i have to dynamically display the validation messages triggered by events such as onblur or onchange on the input textbox.
The challenging part for me is that there are total 5 validations applied to same input and i have to simultaneously display the result of all validations on the right hand side in form of a static list.Each message in list will be preceded by a green check image(for valid validation) and a red check image(for invalid validation).The number of messages in list are fixed and the only thing is to switch the images(red/green tick) before each message, dpending if the corresponding validation passed or not. I am thinking of the following approach:
I made CSS 10 divs, 5 each of valid check image and 5 of invalid cross image.
According to each validation i toggled between and check and cross image.

The problem is that the code is fixed, limited; however it solves my purpose, its lengthy, ackward i did not use any data structures and all due to my limited knowledge. Can someone tell me how to approach this in a better and effective way?

**CSS CODE**

#divRule10
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule11
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule20
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule21
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule30
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule31
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule40
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule41
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule50
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule51
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}

**JS CODE**

  function errorMessage()
      {



      var valuePassword=document.getElementsByName("newpwd")[0].value;

      if(valuePassword.length<8)
      {

      document.getElementById('divRule10').style.display='';
       document.getElementById('divRule11').style.display='none';
     // alert("Error: password must contain at least 8 chars"); 
      }
      else
      {
      document.getElementById('divRule11').style.display='';
       document.getElementById('divRule10').style.display='none';

      }
     re = /[0-9]/;
      if(!re.test(valuePassword)) 
      { 
      document.getElementById('divRule20').style.display='';
       document.getElementById('divRule21').style.display='none';

      } 
      else
      {
      document.getElementById('divRule21').style.display='';
       document.getElementById('divRule20').style.display='none';

      }
      re = /[!@#\$%]/; 
      if(!re.test(valuePassword)) { 
     document.getElementById('divRule30').style.display='';
      document.getElementById('divRule31').style.display='none';

      } 
      else
      {
      document.getElementById('divRule31').style.display='';
       document.getElementById('divRule30').style.display='none';

      }
      re= /\s/g;

     if(re.test(valuePassword))
      {
      document.getElementById('divRule50').style.display='';
       document.getElementById('divRule51').style.display='none';

       }
       else
      {
      document.getElementById('divRule51').style.display='';
       document.getElementById('divRule50').style.display='none';

      }


       if(null==(valuePassword.match(/^[A-Za-z0-9].+$/)))
       {
        document.getElementById('divRule40').style.display='';
         document.getElementById('divRule41').style.display='none';
            //alert(' Error: 1st letter must be a letter');
       }
       else
       {


       document.getElementById('divRule41').style.display='';
       document.getElementById('divRule40').style.display='none';

       }
    }
</script>




**HTML CODE**

<html:password property="newpwd"  size="20" maxlength="15" onblur="restore(),errorMessage()"   name="ChangePwdForm" styleClass="loginUserId"></html:password>


<table>

            <tr>
            <td>
            <div id="divRule10" style="display:none;">

            </div>
            <div id="divRule11" style="display:none;">

            </div>
            </td>
            <td>
            Must be of atleast 8 characters.
            </td>
            </tr>
            <tr>
            <td>
            <div id="divRule20" style="display:none;">

            </div>
            <div id="divRule21" style="display:none;">

            </div>
            </td>
            <td>
            Atleast 1 number
            </td>
            </tr>
            <tr>
            <td>
            <div id="divRule30" style="display:none;">

            </div>
            <div id="divRule31" style="display:none;">

            </div>
            </td>
            <td>
            Atleast 1 special character
            </td>
            </tr>
            <tr>
            <tr>
            <td>
            <div id="divRule40" style="display:none;">

            </div>
            <div id="divRule41" style="display:none;">

            </div>
            </td>
            <td>
            Begin with letter or number
            </td>
            </tr>
            <tr>
            <tr>
            <td>
            <div id="divRule50" style="display:none;">

            </div>
            <div id="divRule51" style="display:none;">

            </div>
            </td>
            <td>
            Cannot have spaces.
            </td>
            </tr>



            </table>

Answer 1

Your javascript validation:

function validate (element_id) {

    // element
    el = document.getElementById(element_id);

    // validation sign
    el_sign = document.getElementById(element_id + '_sign');

    // do some validations here and ...
    if (valid == true)
        el_sign.className = 'valid';
    else
        el_sign.className = 'invalid';

}

Your HTML code:

// element 1, validation sign
<div id="el_1_sign"></div>

// element 1
<input id="el_1" type="text">

// element 2, validation sign
<div id="el_2_sign"></div>

// element 2
<input id="el_2" type="text"> 

// continue ...

Your CSS code:

.valid {
    background-image: url('common/images/valid_rule.png') ;
    width:16px;
    height:16px;
}

.invalid {
    background-image: url('common/images/invalid_rule.png') ;
    width:16px;
    height:16px;
}