Bootstrap span change width after submit - html

Question

I'm using a register form with a jquery to validate this form
My problem is with the design after submit the form and the error appear the span change her height
I'm using a bootstrap for my css
/*validation css*/
#import url('../assets/css/bootstrap.min.css');
#import url('../assets/css/bootstrap-responsive.min.css');
label.valid {width: 24px;height: 24px;background: url(../assets/img/valid.png) center center no-repeat;display: inline-block;text-indent: -9999px;}
label.error {font-weight: bold;color: red;padding: 2px 8px;margin-top: 2px;}
.form-group{
margin-bottom: 15px;
}
label{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #fff;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 500px;
padding: 40px 40px;}
Html Form
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#" id="registration-form" name="form">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Your Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon "><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control label.error" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
Before submit
After submit
$(document).ready(function(){
$('#registration-form').validate({
rules: {
name: {
required: true,
required: true
},
username: {
minlength: 6,
required: true
},
phone: {
minlength: 8,
required: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
address: {
minlength: 10,
required: true
},
agree: "required"
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready

Answer 1

Updated
You need to wrap your script in $(document).ready(function(){...});
Check Demo HERE
JS:
$(document).ready(function(){
$('#registration-form').validate({
rules: {
name: {
required: true,
required: true
},
username: {
minlength: 6,
required: true
},
phone: {
minlength: 8,
required: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
address: {
minlength: 10,
required: true
},
agree: "required"
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
});
});