引导表单验证

Question

我正在验证一个表单，这里如果文本框验证成功，则必须在文本框旁边出现一个右标记，这个右标记是我在 css 中定义的图像。这里一切正常，我的问题是，如果一个文本框验证成功，正确的标记没有出现在它旁边，插入它出现在下一行。我在html页面中的文本框如下，

<div class="form-group control-group">
<label for="uln" class="control-label col-xs-4">Teacher Id:</label>
    <div class="col-xs-8">
        <div class="col-lg-8 controls">
            <input type="text" class="form-control" name="teacherId"
                    id="teacherId" placeholder="Enter Teacher Id">
        </div>
    </div>
</div>

我的css文件如下，

label.valid {
width: 24px;
height: 24px;
background: url(assets/img/valid.png) center center no-repeat;
display: inline-block;
text-indent: -9999px;
}

所有验证工作正常我认为我只需要在 html 代码中进行更改。谁能帮帮我。

我的 jquery 函数为，

$(document).ready(function(){


        $('#create_teacher').validate({
        rules: {
            teacherId: {

            required: true
          },

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

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

            experience: {
                required: true,
                minlength: 6

            },

            prevdetails:{
                required: true,
                minlength: 6

            },
            photo:{
                required: true,
                accept: "gif|png|jpg|jpeg|pjpeg"
            },


            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');
            }

      });
    }); // end document.ready

我的表单结构如下，

<form class="well" id="create_teacher" method="post" action="#">
<div style="height: 850px;">
<div style="width: 104%; margin-top: -20px;">

    <fieldset>
    <legend>&nbsp;&nbsp;&nbsp;Teacher Information</legend>
</div>
<br> <br>
<div class="form-group control-group">
    <label for="uln" class="control-label col-xs-4">Teacher Id:</label>
        <div class="col-xs-8">
        <div class="col-lg-8 controls">
            <input type="text" class="form-control" name="teacherId"
                    id="teacherId" placeholder="Enter Teacher Id">
        </div>
        </div>

</div>
    <div>..</div>
    <div>..</div>
</fieldset> 
</div>
</form>

Answer 1

使用此解决方案，您必须在每个标签和输入字段周围放置一个固定宽度的 DIV。

label.valid {
    width: 24px;
    height: 24px;
    background: url(assets/img/valid.png) center center no-repeat;
    display: inline-block;
    float: right; /* Add this */
    text-indent: -9999px;
}

JSfiddle

Answer 2

一种解决方案是在您的控制组div 中添加另一个内联元素：

 <div class="form-group control-group">
     <label for="uln" class="control-label col-xs-4 ">Teacher Id:</label>
     <div class="col-xs-4">
         <div class="col-lg-8 controls">
             <input type="text" class="form-control" name="teacherId" id="teacherId" placeholder="Enter Teacher Id" />
         </div>
     </div>
     <span class="validation-image valid" />
 </div>

因此，您可以独立于 label 元素处理“验证图像”的外观（如果我没记错的话，它应该出现在输入字段之前）。

当然，您现在必须调整您的 jQuery 调用，以便在成功时选择和操作正确的元素。

这是更新后的fiddle。