"Introduction to Programming" was retired on April 27, 2015. You are now viewing the recommended replacement.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Abdi Ahmed
Abdi Ahmed
Courses Plus Student 1,667 Points

Form Validation errors not showing with correct CSS colors

Hi All,

Can anyone help me with form validation script that I have on trial website. Basically, I have all the basics correct but for some reason when I want to submit the form the error messages appear but the text coloring and red border color for text-box is not appearing, it looks like it doesn't like this <div class="col-sm-6"> </div> and I don't why!! if I remove the the col-sm-6 tag the text-box extends to the container height and It responds by showing the errors with the appropriate. I really need to understand this and get it right.

it works with this code:

<div class="form-group">
    <input type="text" class="form-control" id="name" name="name" placeholder="Name">
    <span class="help-block" style="display: none;">Please enter your name. </span> 
</div>

but not with this code, with the labels and div class="col-sm-6"> </div>: *I WANT THIS TO WORK!!!! *

<div class="form-group">
  <label for="firstname" class="col-sm-3 control-label">First Name </label>
  <div class="col-sm-6"> 
<input type="text" class="form-control" name="fname" id="fname" placeholder=" ">
     <span class="help-block" style="display: none;">Please enter your first name.</span>
 </div>
</div><!-- End control group -->

Can anyone help me get this right: Here is the link of the webpage I am working on: link

and I have one working already version without the form field labels on this links:

link

4 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Abdi,

It looks like your script is not adding the has-error class to your div.

Did you write "contact-form.js" yourself or where did it come from? I couldn't track it down.

I think your problem is with line 58 in that script:

$input.parent('.form-group').addClass('has-error');

This ends up not selecting anything with the markup that you'd like to use. The one with the label. It's expecting the form-group div to be the immediate parent.

If you get rid of the filter then it should work:

$input.parent().addClass('has-error');

You probably don't want your label to have the error styling but if you did then you can use this: (Uses parents() not parent())

$input.parents('.form-group').addClass('has-error');

Let me know if that works out for you.

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

Thanks Jason for your help,

I got it by by googling and tried to adapt to my register.php form but was having a problem with it, the original one I copied to my server space and below is the link:

This is an link

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome. So did you get it working?

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

Jason, It worked!!! Thanks your suggesting was perfect. Thank you. WOHOOOOO!!!!

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

How do I evaluate the select box or option box using Jquery form validation, can anyone give an idea how to do this:

Here is my option element:

<select class="form-control">
                   <option>Please choose company type</option>
                   <option value="fdc">Family Day Care</option>
                   <option value="remittance">Remittance Service</option>
                   <option value="personal">Individual user</option>
                 </select>

Thanks in advance