Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Development Tools

Abdi Ahmed
PLUS
Abdi Ahmed
Courses Plus Student 1,667 Points

Bootstrap 3 form validation image showing below the textbox[ when the input is valid ]

<p>I am creating a form using Twitter Bootstrap 3 with Jquery and PHP. every thing is working fine except when the user inputs text I want top show an image with a "tick" to show the user that the input was OK. The problem I have is the image is showing below the the text box instead of the right hand side of the textbox this is what I have if anyone can help me get this right. </P>

HTML``` <p><div class="form-group"> <label for="fname" class="control-label col-sm-2"> Family Name </label> <div class="controls col-sm-6"> <input type="text" class="form-control required" name="fname" id="fname" placeholder="Family Name"> </div>
</div> <div class="form-group"> <label for="email" class="control-label col-sm-2">Email Adress </label> <div class="controls col-sm-6"> <input type="text" class="form-control required" name="email" id="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="comment" class="control-label col-sm-2">Comment </label> <div class=" controls col-sm-6"> <textarea name="comment" class="form-control required" name="comment" id="comment" rows="6" placeholder="comment"></textarea>
</div> </div>

<div class="form-actions">
<div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary">Submit Form</button> </div> </div>

</form> </p>

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

JAVASCRIPT``` <p>$(document).ready(function () {
     $('#contact-form').validate({
       rules: {
            name: {
            minlength: 2,
            required: true
        },
            fname : {
            minlength: 2,
            required: true

        },
            email: {
            required: true,
            email: true
        },
            comment: {
            minlength: 2,
            required: true
        }
    },
    highlight: function(element) {
    $(element).closest('.form-group').removeClass('success').addClass('error');
        },
         success: function(element) {
      $(element)
      .text('OK!').addClass('valid')
      .closest('.form-group').removeClass('error').addClass('success');
    }
    });
    }); // end document.ready
</p>```
Abdi Ahmed
Abdi Ahmed
Courses Plus Student 1,667 Points

I was unable to format the code using the Markdown cheat sheet, I sent file to teamtree house support

Hey Abdi,

Before throw out a question, please double check whether you read the instructions carefully. The reason why you can't publish a well-format MarkDown here may caused by the wrong way of using MarkDown syntax.

Code Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

        ```html
        <p>This is code!</p>
        ```
Abdi Ahmed
Abdi Ahmed
Courses Plus Student 1,667 Points

Well, I put enough effort to do the best I could to present nicely.. but I couldn't but there is always next Dicussion...