'Bootstrap form validation

I am validating a form , here if text box is validated successfully a right mark has to appear next to text box and this right mark is a image that I defined in css . Here every thing working fine , my problem is if a text box validated successfully right mark is not appear next to it , insted it appearing in next line. my text box in html page is as follow ,

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

my css file is as follow,

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

all validation is working fine I think something I have to change in html code only . can any one help me.

my jquery function as,

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

my form structure is as follow,

<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>
jqueryhtmlcsstwitter-bootstrapjquery-validate


Solution 1:[1]

With this solution you have to put a DIV with a fixed width around every label and input field.

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

Solution 2:[2]

One solution is to add another inline element within your control-group 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>

So you can handle the appearance of your "validation images" independently from your label element (which should appear before the input field if I got you right).

Of course you have to adjust your jQuery calls now to select and manipulate the correct element on success now.

Here's the updated fiddle.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 alexP
Solution 2

Related Questions