Edit in JSFiddle

$(function(){

    //add custom validator for jquery validator
    jQuery.validator.addMethod('passwordMatch', function(value, element) {
        
    // The two password inputs
   	var password = $("#user_password").val();
    var confirmPassword = $("#user_password_confirmation").val();
 
    // Check for equality with the password inputs
    if (password != confirmPassword ) {
    	return false;
    } else {
        return true;
    }
}, "Your Passwords Must Match");


$("#signup").validate({

  errorClass:'error',  
  errorPlacement:function(error,element){
  	element.parent().prev().html(error);
  },
  
  success: function(label) {
    label.parent().next().find('button.success').show();
    label.parent().next().find('button.fail').hide();
    label.parent().html(get_string_from_for(label.attr('for')));
    console.log(label.parent().next());
  },
  
  highlight: function(element, errorClass) {
  	$(element).prev().show();
  },
  
  rules: {
    'user[username]': "required",
    'user[email]': "required",
    'user[password]': {
    	required:true,
    	minlength:9
    },
    'user[password_confirmation]': {
    	required:true,
    	passwordMatch:true
    }
   },
   messages:{
   		'user[username]':{
   			required:'You have to enter something here'
   		},
   		'user[email]':{
   			required:'Purr, you have to enter something here',
   			email:'Are you sure this is your email?'
   		},
        'user[password]': {
   			required:'You have to enter something here',
            minlength: "Your password is not long enough. Please enter at least 9 characters"
        },
        'user[password_confirmation]': {
   			required:'You have to enter something here',
            passwordMatch: "Your password aren't matching" // custom message for mismatched passwords
        }

   }
});//end of validate()

$('#user_name').on('change',function(){
  $('#signup').validate();
  console.log('here');
});

    
 function get_string_from_for(for_text){
 	switch(for_text) {
    case 'user_name':
        return 'username';
        break;
    case 'user_email':
        return 'email'
        break;
    case 'user_password':
        return 'password'
        break;
    case 'user_password_confirmation':
        return 'password confirmation';
        break;
    default:
        return '';
	}
}

 });
<button class="flat" data-toggle="modal" data-target="#myModal"> Sign Up</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel" style="color:#9a9a9a;font-family:Mailpile-Normal;">Sign Up</h4>
            </div>
            <div class="modal-body" style="text-align:left;">
                <form role="form" id="signup" action="/users" method="post">
                    <div class ="form-group">
                        <p class="text-muted">username</p>
                        <div class="right-inner-addon ">
                          <button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
                          <button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
                          <input size="35" id="user_name" name="user[username]" type="text" class="form-control"placeholder="choose a cool name" />
                        </div>
                    </div>
                    
                    <div class ="form-group">
                        <p class="text-muted">email</p>
                        <div class="right-inner-addon ">
                            <button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
                            <button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
                            <input size="35" id="user_email" name="user[email]" type="email" class="form-control"placeholder="yourname@example.com" />
                          </div>
                      </div>
  
                      <div class ="form-group">
                          <p class="text-muted">password</p>
                          <div class="right-inner-addon ">
                              <button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
                              <button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
                             <input size="35" id="user_password" name="user[password]" type="password" class="form-control"placeholder="at least 6 characters" />
                          </div>
                      </div>

                      <div class ="form-group">
                          <p class="text-muted">password confirmation</p>
                          <div class="right-inner-addon ">
                              <button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
                              <button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>        
                              <input size="35" id="user_password_confirmation" name="user[password_confirmation]" type="password" class="form-control"placeholder="" />
                            </div>
                      </div>
                      <button class="btn btn-default create">CREATE MY ACCOUNT</button>
                  </form>
                </div><!--end of modal body-->
            </div><!--end of modal content-->
        </div><!--end of model dialog-->
    </div><!--end of moal-->
       
.modal-dialog {
  width: 400px;
}

.modal-content {
  width: 400px;
}
.modal-body{
  padding-left: 50px;
  padding-right:50px;
}

button{
  display: inline-block;
  margin:0 5px 0 0;
  padding:15px 30px;
  font-size: 24px;
  line-height: 0.9;
  appearance:none;
  box-shadow: none;
  border-radius: 0;
  -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button.flat{
  color:#fff;
  background-color: #00d3a3;
  text-shadow:-1px 1px #417cb8;
  border: none;
}
button.flat:hover{
  background-color: #00b180;
  text-shadow:-1px 1px #27496d;
}

button.flat:active{
background-color: #00b180;
text-shadow:-1px 1px #193047;
}
#email{
	width:340px;
	height:40px;
}
.inline-actions{
	position: absolute;
	right: 0;
	bottom: 20px;
	z-index: 1;
	overflow: hidden;
}
.check-icn{
	background: url(../assets/icons/checkmark-sm.png) center center no-repeat;
	width:34px; 
    height:34px;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon button {
    position: absolute;
    right: -5px;
    pointer-events: none;
}
#search{
}
button.success,button.create{
	background-color: #00d3a3;
}
button.fail{
	background-color: #ffc000;
}
button.create{
	background-color: #00d3a3;
	color:#fff;
}
button.create:hover, button.create:active{
	background-color: #00b180;
	color:#fff;
}


input[type="text"], input[type="email"],input[type="password"]{

  background-color : #f7f7f7; 
  outline: none;
  border: 2px solid #e7e7e7 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;

}

input[type="text"]:focus, input[type="email"]:focus,input[type="password"]:focus{
  background-color : #e7e7e7; 
  outline: none;
  border: 2px solid #e7e7e7 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

External resources loaded into this fiddle: