jQuery 验证图像位置

标签 jquery html css twitter-bootstrap-3 jquery-validate

我的问题是当我的表单验证成功时,有效图像位于我输入表单的底部位置。我希望图像位于输入框旁边的 -> 正确位置,而不是在下方/下方。

我在 css 中做了 inline-block 但它不起作用需要帮助。

电流输出

enter image description here

有效.png

enter image description here

html:

<form id="validateCF">

<h2 class="col-sm-offset-2">Contact Form</h2> <br />

<div class="form-horizontal">
                    <div class="form-group form-control-group">
                        <label for="name" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-4">
                            <input type="text" name="name" class="form-control" placeholder="Enter Name..." />
                        </div>
                    </div>

                    <div class="form-group form-control-group">
                        <label for="email" class="col-sm-2 control-label">Email Address</label>
                        <div class="col-sm-4">
                            <input type="email" name="email" class="form-control" placeholder="Enter Email Address..." />
                        </div>
                    </div>

                    <div class="form-group form-control-group">
                        <label for="message" class="col-sm-2 control-label">Message</label>
                        <div class="col-sm-4">
                            <textarea rows="3" name="message" class="form-control" placeholder="Enter Message..."></textarea>
                        </div>
                    </div>
            </div>  
</form>

脚本:

<script type="text/javascript">
$(document).ready(function(){

        $('#validateCF').validate({
        rules: {
           name: {
            required: true,
           minlength: 3
          },

          message: {
                required: true,
                minlength: 6
            },

          email: {
            required: true,
            email: true
            }
        },
            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');
            }
      });

});
</script>

CSS:

label.valid {
    width: 24px;
    height: 24px;
    display: inline-block;
    text-indent: -9999px;
    background: url(../images/valid.png) center center no-repeat;
}
label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}

最佳答案

试试这个.control-label{ float: left; }或者试试这个.control-label{ display: inline-block; }

关于jQuery 验证图像位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23902881/

相关文章:

jquery - django 智能选择应用程序

html - 左侧元素具有恒定宽度,右侧部分根据页面缩放

css - 设置选项列表的样式

javascript - JQuery 解析 JSON

javascript - 如何防止 BootStrap 下拉列表中 URL 末尾的#?

jQuery Ajax GET 和 contentType?

javascript - Jquery 悬停显示和隐藏可见性问题

html - 如何在 W3.CSS 中将两张卡片并排放置

javascript - 隐藏<span>的Javascript函数?

php - 使用 php 在 head 标签内设置一个 css 属性