Jquery 引导表单验证

我正在验证一个表单，如果文本框成功验证，文本框旁边必须出现一个右标记，这个右标记是我在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>

所有的验证都很好，我想我只需要修改html代码。有人能帮我吗

我的jquery函数为，

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

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

我的表单结构如下所示，

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

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

教师信息



教师编号：
..
..

使用此解决方案，您必须在每个标签和输入字段周围放置一个固定宽度的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;
}

---

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

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>

教师编号：

因此，您可以独立于

标签

元素处理“验证图像”的外观（如果我没有弄错的话，它应该出现在输入字段之前）

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

---

以下是更新的。

请提供有关如何验证表单值以及在哪一点应用（或删除）CSS类的更多信息。您使用的是服务器端还是客户端（JS）验证？纯HTML和CSS代码在这里没有多大帮助…如果我手动将“valid”类附加到DIV@matthias，我将使用客户端验证并使用Jquery函数进行验证，这对我来说很好。@matthias我编辑了我的问题，请检查@alexP我想在文本框的末尾打上右标记。对我来说，在下一行中，它只会出现在右边。不，现在它正在提交下一行文本框。我只想在文本框旁边。哦，等等，现在一切都搞混了。您正在用图像覆盖标签声明的空间，因此无法使用。我很快会更正我的答案。只是更新了整个答案，希望它现在得到了正确的方向。问题和问题对我来说仍然有点不清楚。答案取决于完整表单和元素的结构和操作方式。@matthis no现在也在下一行，实际上我希望正确标记文本框是否成功验证，但在加载表单时，文本框在这里。k我将从我的表单结构中编辑问题。