JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<form id='targets' action='http://www.innovativephp.com' method='post'  >    
    <ul>
        <li ><div class='label_col'>Password</div><div class='field'><input type='text' name='test_field' id='password' /></div></li>
        <li class='error_msg' >
        <div class='label_col'>&nbsp;</div><div class='error_field' id='password_error_msg'>&nbsp;</div>
        </li>
            
                    
                        
                        <li><div class='label_col'>&nbsp;</div><div class='field'><input type='submit' value='Save' /><input type='reset' value='Reset' class='reset'/></div></li>
    </ul>   
</form>

CSS

.label_col{
 width:20%;
  padding:5px;  
float:left;
}

.field{
 width:75%;
  padding:5px;
 float:left;
}
.error_field{
 width:75%;
  padding:5px;
 float:left;
    

}
.error_msg{
display:none;
 clear:both;  
   color:#f00;
}

li{
    width:100%;
    float:left;
}

JavaScript

$('#password').keyup(function() {
    $('#password_error_msg').html('').parent().hide();
    var password = $('#password').val();
    
    if(password.length < 6){
       $('#password_error_msg').html("Weak Password");
        $('#password_error_msg').parent().show();  
    }else{
        var regex_simple = /^[a-z]$/;
        var regex_capital = /^[A-Z]$/;
        var regex_numbers = /^[0-9]$/;
        
        var simple_status  = '0';
        var capital_status = '0';
        var number_status  = '0';
        var status_count   = '0';
        
        for(i=0;i<password.length;i++){
            var check_character = password.charAt(i);

            if(regex_simple.test(check_character) && simple_status == '0'){
               simple_status = '1';
               status_count++;
            }
            if(regex_capital.test(check_character) && capital_status == '0'){
               capital_status = '1';
                status_count++;
            }
            if(regex_numbers.test(check_character) && number_status == '0'){
               number_status = '1';
                status_count++;
            }
        }
     
       switch(status_count){
                case 0:
                $('#password_error_msg').html("Weak Password");
        $('#password_error_msg').parent().show();
                break;
            case 1:

                $('#password_error_msg').html("Good Password");
        $('#password_error_msg').parent().show();
                break;
                    
                    case 2:
                $('#password_error_msg').html("Strong Password");
        $('#password_error_msg').parent().show();
                break;
                    
                    case 3:
                $('#password_error_msg').html("Excellent Password");
        $('#password_error_msg').parent().show();
                break;
               }
        
        
        
    }
});


$('#targets').submit(function() {
  var error=0;
    
   ...