Bootstrap-3：使用 jQuery 验证消息输入 Group-Addon STRETCHES

Posted 2023-05-09

【中文标题】Bootstrap-3：使用 jQuery 验证消息输入 Group-Addon STRETCHES

【英文标题】：Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages

【发布时间】：2017-10-02 22:39:33

【问题描述】：

我正在使用带有 jQ​​uery Validate 插件的 Twitter Bootstrap 3，但由于某种原因，当验证错误消息弹出时 STRETCHES 我的 Input Group-Addon 框和图标。

正常 [无验证]

经过验证

如果你想解决问题，这是我的 Fiddle：My Fiddle

我在网络上尝试了多种解决方案，例如

GitHub Issue of Input Addon 和 Input Addon issue on Stack Overflow

但无论我尝试什么，我似乎都无法解决问题。

请告诉我，当验证错误出现时，我必须做些什么来防止 INPUT GROUP-ADDON 拉伸。谢谢！

我的主要代码如下：

jQuery

$('.login-form').validate (
        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",  
    onError : function()
        $('.input-group.error-class').find('.help-block.form-error').each(function() 
          $(this).closest('.form-group').addClass('error-class').append($(this));
        );
    ,

        rules: 
            username: 
                required: true,
                minlength: 3,
                maxlength: 40
            ,

          password: 
                required: true,
                minlength: 7,
                maxlength: 20
            
            ,

        messages: 
            username: 
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            ,
                       password: 
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            ,

                highlight: function(element, errorClass) 
        $(element).removeClass(errorClass);
        
        ,

  submitHandler: function()   
            $('#noenter').show();   

          
    );

HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <form class="login-form" action="login" method="post" action="../php/ValidateForm.php">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" style="color:red;" id="myModalLabel">TITLE</h4>
        </div>
        <div class="modal-body">
          <!-- Text input-->
          <div class="form-group">

            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-2x fa-user"></i></span>
              <input required id="username" name="username" placeholder="Username or Email" class="inputfield form-control" type="text">


            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">

            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-2x fa-lock"></i></span>
              <input required id="password" name="password" placeholder="Password" class="form-control" type="password">


            </div>
          </div>
          <div class="error">

          </div>
          <input title="Log In" name="submit" value="Log In" type="submit" class="loginbtn btn btn-lg btn-block">
        </div>

        <p class="text-muted"><strong>Need an account? <a href="#">Join </a></strong>

        </p>


      </div>
    </div>
  </form>
</div>

CSS

.form-control 
  color: #000 !important;


form label.error-class 
  font: 15px Tahoma, sans-serif;
  color: #ED7476;
  margin-left: 5px;
  position: relative;


form input.error-class,
form input.error-class:hover,
form input.error:focus,
form select.error-class,
form textarea.error-class 
  background: #FFEDED;


.error-class 
  color: red;
  z-index: 0;
  position: relative;
  display: inline-block;


.valid-class 
  color: black;

【参考方案1】：

我对您的 jQuery 和 Css 文件做了一些更改，现在可以使用了。

jQuery 文件更改。

$('.login-form').validate (

        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) 
        if(element.parent('.input-group').length) 
            error.insertAfter(element.parent());
         else 
            error.insertAfter(element);
        
    ,
    onError : function()
        $('.input-group.error-class').find('.help-block.form-error').each(function() 
          $(this).closest('.form-group').addClass('error-class').append($(this));
        );
    ,

        rules: 
            username: 
                required: true,
                minlength: 3,
                maxlength: 40
            ,

          password: 
                required: true,
                minlength: 7,
                maxlength: 20
            
            ,

        messages: 
            username: 
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            ,
                       password: 
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            ,

                highlight: function(element, errorClass) 
        $(element).removeClass(errorClass);
        
        ,

  submitHandler: function()   
            $('#noenter').show();   

        

    );

CSS 更改。

.error-class 
    color:red;  z-index:0; position:relative; display:block; text-align: left; 

【讨论】：

非常感谢！ (^_^) 我没有考虑在错误放置上添加“IF”语句。

非常感谢。拯救了我的一天

怎样才能同时高亮组图标和输入框

【参考方案2】：

这适用于我在引导程序 3 中使用文本字段（包括是否使用输入组）

我只是搜索父类 .form-group，然后使用 append 在末尾插入错误跨度。

$('#form-enroll').validate(
    ...
    errorPlacement: function(error, element) 
        $(element).parents('.form-group').append(error)
    ,
)

用视图和控制台看看我的screenshot。

【讨论】：

您的代码需要改进。我为此添加了一个新的解决方案。

【参考方案3】：

如果你不想乱用 java 脚本，那么就放下面的代码

      <div class="form-group">

        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-2x fa-user"></i></span>
          <input required id="username" name="username" placeholder="Username or 
    Email" class="inputfield form-control" type="text">
        </div>
      <label id="username-error" class="error" for="username" style="display: none;"></label>
      </div>

【参考方案4】：

尝试将您的图标移到跨度之外：

<div class="input-group">
  <i class="fa fa-2x fa-user"></i>
  <span class="input-group-addon"></span>
   <input required id="username" name="username" placeholder="Username or Email"          class="inputfield form-control"  type="text">
</div>

【讨论】：

这使图标消失，输入组插件仍然伸展：i.is.cc/16X74yUY.jpg

【参考方案5】：

我之前遇到了同样的问题，并实现了下面的代码......

 <script type="text/javascript">
         errorPlacement: function (error, element) 
            if (element.parent().hasClass('input-group')) 
                error.insertAfter(element.parent());
             else 
                error.insertAfter(element);
            
        </script>

检查屏幕截图 ow 工作示例