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
Daven Hietala
8,040 PointsHow 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
1 Answer
Daven Hietala
8,040 PointsHere 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">×</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">×</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>
Fernando Boza
25,384 PointsFernando Boza
25,384 PointsHi Daven be sure to add and format your code above