提交后Bootstrap跨度更改宽度

Question

我使用带有jquery的注册表来验证此表单

我的问题是提交表单后的设计，错误出现跨度改变她的身高

我使用bootstrap作为我的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!")
      }

    });
});