验证密码，匹配密码

Question

我想用简单的jq代码验证密码，我想知道我的代码出了什么问题，因为我之前使用过相同的代码而且它有用或者是对bootsrap有什么问题（对它没有多少经验）？

代码的问题在于，当password1和password2匹配时，我希望input-group-addon更改为另一个input-group-addon。相反，我得不到回应。

这是html：

<div class="form-group">
   <label for="validate-password" style="float: left; margin-top: 5px; 
         margin-right:11px"><p style="margin-left:57px; ">Password</p>
    </label>
         <div class="input-group" data-validate="length" data-length="8">
         <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-key"></i></div>
            <input type="password" class="form-control" name="password1" id="password1" placeholder="Password" required></input>
            <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>

          </div> 
             <span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004; font-size: 15px; word-spacing: -10px; margin-top:2px; ">At least 8 characters long.</span>

           <div class="form-group" style="margin-top:4px;">
              <label for="validate-password" style="float: left; margin-top: 5px; margin-right: 11px; right: 50px;"><p st>Confirm Password</p></label>
              <div class="input-group" data-validate="length">
              <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-repeat"></i></div>
                 <input type="password" class="form-control" name="password2" id="password2" placeholder="Confirm Password" required></input>
                 <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
              </div>
            </div>

这是js：

   $(document).ready(function() {
   $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
    var $form = $(this).closest('form'),
        $group = $(this).closest('.input-group'),
        $addon = $group.find('.input-group-addon'),
        $icon = $addon.find('span'),
        state = false; 

     if (!$group.data('validate')) {
        state = $(this).val() ? true : false;
    }else if ($group.data('validate') == "email") {
        state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
    }else if ($("#password1").val().length >= 8) {
        state = $(this).val().length >= $group.data('length') ? true : false;
    }

    if($('#password1').val() == $('#password2').val()){
        $addon.removeClass('danger');
        $addon.addClass('success');
        $icon.attr('class', 'glyphicon glyphicon-ok');

    }else{
        $addon.removeClass('success');
        $addon.addClass('danger');
        $icon.attr('class', 'glyphicon glyphicon-remove'); 
    }


    if (state) {
            $addon.removeClass('danger');
            $addon.addClass('success');
            $icon.attr('class', 'glyphicon glyphicon-ok');
    }else{
            $addon.removeClass('success');
            $addon.addClass('danger');
            $icon.attr('class', 'glyphicon glyphicon-remove');
    } 

      });

$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');


});