Bootstrap изменение ширина диапазона после отправить

Question

Я использую регистрационную форму с JQuery, чтобы проверить эту форму,

Моей проблема с дизайном после отправки формы и ошибки появляются изменить продолжительность ее высоту

Я использую загрузчик для моего 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 Форма

<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> 

Перед представить

После представить

$(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

Обновлено

Вам нужно обернуть сценарий в $(document).ready(function(){...});

Регистрация Демо 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!") 
     } 

    }); 
});