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.

HTML

Daven Hietala
Daven Hietala
8,040 Points

How to add custom validation field messages to the form

I have been attempting to add custom validation field messages to the form. I started by reading through the bootstrap documentation on the subject. I can pretty much understand what they are saying. But, when it comes to adding the code to the existing form I am confused. I tried copying the custom styles code from the bootstrap documentation and slowly filling in the html into the existing form element. This did not work.

Has anyone had success adding custom validation field messages to the form? If so how did you go about it?

Thank you for your time.

Daven

Hi Daven be sure to add and format your code above

1 Answer

Daven Hietala
Daven Hietala
8,040 Points

Here is my form without custom validation field messages..

 <! ===================================
          FORM MODAL
          ================================== >
        <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register form" aria-hidden="true">
          <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
              <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Register for Full Stack Conf</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <!--   registration form   -->
                  <form class="needs-validation" novalidate>
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                      <strong>Hurry!</strong> Early bird registration ends in two days.
                    </div>
                    <h5 class="mb-4">Basic Info</h5>
                    <div class="form-group">
                      <label for="form-control-label" for"name">Name:</label>
                      <input type="text" class="form-control" id="name">
                    </div>
                    <div class="form-group">
                      <label for="form-control-label" for="email">Email:</label>
                      <input type="email" class="form-control" id="email">
                    </div>
                    <div>
                      <label for="role">Job Role:</label>
                      <select class="custom-select form-control" id="role">
                        <option value="full stack js developer">Full Stack JavaScript Developer</option>
                        <option value="front end developer">Front End Developer</option>
                        <option value="back end developer">Back End Developer</option>
                        <option value="designer">Designer</option>
                        <option value="student">Student</option> 
                      </select>
                    </div>
                    <hr class="my-4">
                    <h5 class="mb-4">Which Topics Interest You Most?</h5>

                    <div class="form-check">
                      <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">JavaScript Frameworks</span>
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">JavaScript Libraries</span>
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Node.js</span>
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Build Tools</span>
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">ES2015</span>
                      </label>
                    </div>

                    <hr class="mb-4">
                    <h5 class="mb-4">Payment Info</h5>

                    <div class="form-row">
                      <div class="col-lg-6 form-group">
                        <label for="cc-num">Card Number:</label>
                        <input class="form-control" id="cc-num" type="text">
                      </div>

                      <div class="col-lg form-group">
                        <label for="zip">Zip Code:</label>
                        <input class="form-control" id="zip" type="text">
                      </div>

                      <div class="col-lg form-group">
                        <label for="cvv">CVV:</label>
                        <input class="form-control" id="cvv" type="text">
                      </div>
                    </div>

                    <div class="form-row">
                      <label class="col-lg-12">Expiration Date:</label>

                      <div class="form-group col-lg-8">
                        <select class="custom-select form-control" id="exp-month">
                          <option value="1">1 - January</option>
                          <option value="2">2 - February</option>
                          <option value="3">3 - March</option>
                          <option value="4">4 - April</option>
                          <option value="5">5 - May</option>
                          <option value="6">6 - June</option>
                          <option value="7">7 - July</option>
                          <option value="8">8 - August</option>
                          <option value="9">9 - September</option>
                          <option value="10">10 - October</option>
                          <option value="11">11 - November</option> 
                          <option value="12">12 - December</option>
                        </select> 
                      </div>

                      <div class="form-group col-lg">
                        <select class="custom-select form-control" id="exp-year">
                          <option value="2016">2016</option>
                          <option value="2017">2017</option>
                          <option value="2018">2018</option>
                          <option value="2019">2019</option>
                          <option value="2020">2020</option>
                        </select>  
                      </div>
                    </div>

                    <hr class="mb-4">
                    <button type="submit" class="btn btn-primary btn-lg">Register</button>
                  </form><!--   /registration form   -->

This is the bootstap documentation I am referring to.. https://getbootstrap.com/docs/4.3/components/forms/#validation

This is the custom bootstrap validation messages code I am trying to integrate into the above code..

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>