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

JavaScript

Posted by James Barrett
James Barrett
13,253 Points

How do you add a bootstrap 'success' class using pure (vanilla) JavaScript in a contact form?

Hi there,

I am trying to add a bootstrap class to my contact form if an input field is entered correctly. From looking at the BootStrap 4 Docs, I can see that .has-success is the class to use; I want to utilize this if a name is entered. Here is my code:

HTML:

<div class="modal-body">
          <form method="post" action="#" name="contactform" id="contactform">
            <fieldset class="form-group">
              <label for="Name">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Example: John Smith">
            </fieldset>
            <fieldset class="form-group">
              <label for="Email">Email</label>
              <input type="email" class="form-control" id="email" placeholder="Example: johnsmith@mail.com">
            </fieldset>
            <fieldset>
             <label for="Message">Message</label>
              <textarea class="form-control" id="message" rows="5" placeholder="Hi there! My name is John Smith..."></textarea>
            </fieldset>
          </form>
        </div>

JS:

 var error = 0;

   // Validate the user's name
   var name = document.contactform.name.value;
   if (name === "") {
       error = 1;
   } else {
     // Add 'success' class here!
   }

   if(error == 0) {
     return true;
   } else {
     return false;
   }

2 Answers

Steven Parker
Steven Parker
243,670 Points
Steven Parker
Steven Parker
243,670 Points

:point_right: I think this might be what you want:

     // Add 'success' class here!
     document.contactform.classList.add("has-success");

While you're at it, did you know you replace all this:

   if(error == 0) {
     return true;
   } else {
     return false;
   }

With just this:

   return (error == 0);

Happy coding! :sparkles:

James Barrett
James Barrett
13,253 Points

Hi there. Thanks for your answer however there is still a problem. The success class will be applied to all form fields. I want it just for the name. How would I go about doing this? Thanks.

Seth Kroger
Seth Kroger
56,416 Points 
document.getElementById("name").classList.add("has-success");
  // or (better compatibility with older versions of IE)
document.getElementById("name").className += " has-success";
Learning Account
Learning Account
6,292 Points
Learning Account
Learning Account
6,292 Points

Not quite sure what you're getting back from document.contactform.name.value but if you're trying to get the value of a text input with the id of "name" it should be something like:

  var name, error = 0; // creating both of your variables at once by using a comma separated list

   // Validate the user's name
   name = document.getElementById("name"); //removing the value from this since we can reuse this variable
   if (name.value) { //by just doing the if(name.value) we check if it has a value at all so there is no need for the === ""
       error = 1;
       return true; // no need for a separate conditional to return true/false
   } else {
      name.addClass('has-success'); // reminder: no need for a period before the classname when using this method
      return false;
   }```
James Barrett
James Barrett
13,253 Points

I believe addClass() is a jQuery method?