Question

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())) {
      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); 
          });

  }

});

Answer 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*/