Var to html div creating list

Some info on the issue: I am trying to create a list that fills up with all the issues a person had with their password, I'm sure there are a million ways. However the way I am doing that is by using a var called what (which is defined earlier so that's not the issue) and having it take on the value of the div before it's cleared and then what + my new content is placed in the new div, and each if statement adds on. So if your password is missing everything, then a nice long list should show up.

I had this working before made some changes and now its not working again. Also please note I removed the <li> just to trouble shoot the issue. Oh, and what it does now is it runs through all the if statements and displays just the text of the last if statement that was false (so no list is created, however all the text of all the issues flashed quickly till the last one which stays.).

 $("#password").blur(function()
{

  if($('#password').val().length >= 6) {
      passlen = true; 
      checkSubmitStatus();}
    else{   
    what=$("box1").val(); 
      passlen= false;

      $("#box1").fadeTo(200,0.1,function() //start fading the messagebox
        { 
         $(this).html(what +  'Password must be atleast 6 characters long!').addClass('messageboxerror').fadeTo(900,1); 
          });


  }

  if($('#password').val() != $('#username').val()) {
      passuse=true;
      checkSubmitStatus();}
      else{
          passuse= false; 
          what=$("#box1").val();  

        $("#box1").fadeTo(200,0.1,function() //start fading the messagebox
        { 
          $(this).html(what +  'Password must be different from Username!').addClass('messageboxerror').fadeTo(900,1); 
          });  


  }
  re = /[0-9]/;
  if(re.test($('#password').val())) {
      passnum=true;
      checkSubmitStatus();}
      else{
          passnum= false;
        what=$("#box1").val(); 

    $("#box1").fadeTo(200,0.1,function() //start fading the messagebox
        {   

         $(this).html(what +  'Password must contain at least one number (0-9)!').addClass('messageboxerror').fadeTo(900,1); 
          });


  }
  re = /[a-z]/;
  if(re.test($('#password').val())) {
      passlow=true;
      checkSubmitStatus();}
      else{
          passlow= false;
         what=$("#box1").val();  

    $("#box1").fadeTo(200,0.1,function() //start fading the messagebox
        { 

         $(this).html(what +  'Password must contain at least one lowercase letter (a-z)!').addClass('messageboxerror').fadeTo(900,1); 
          });


  }
  re = /[A-Z]/;
  if(re.test($('#password').val())) {
 开发者_JAVA技巧     passup=true;
      checkSubmitStatus();}
      else{
          passup=false;
          what=$("#box1").val(); 

          $("#box1").fadeTo(200,0.1,function() //start fading the messagebox
        { 

         $(this).html(what +  'Password must contain at least one uppercase letter (A-Z)!').addClass('messageboxerror').fadeTo(900,1); 
          });

  }

});

You can create a <ul> element and use jQuery's append/appendTo function.

var ul = $("ul");

if( /*password passes criterion*/ ) {
   flag = true;
   checkSubmitStatus();
} else {
   flag = false;
   $("<li></li>").html(errormessage).addClass("messageboxerror").appendTo(ul).fadeTo(900,1);
}

/*Repeat for each criterion*/

I don't fully know if your question states that you want to provide a full list of validation errors, or only the first one encountered.

If all of them, I agree with Dennis' answer of creating a holding element (such as a tag) and add