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
Rye Zhu
5,943 PointsValidation messages not working correctly?
Hi! So my validation feedback messages are not working correctly. First of all, the valid feedbacks are present before I even fill in the form. Second, even though my invalid feedback does show up for the empty fields when I hit submit, it doesn't disappear once I fill in the space.
Here are my codes:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-success text-white">
<h5 class="modal-title" id="exampleModalLabel">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 class="needs-validation" novalidate>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Hurry!</strong> Early bird registration ends in 2 days.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<h5 class="mb-4">About You</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-group">
<label for="role">Role:</label>
<select class="form-control custom-select" 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">Select all topics that interest you:</h5>
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input" id="javascript-frameworks">
<label class="form-check-label" for="javascript-frameworks">Javascript Frameworks</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input" id="javascript-libraries">
<label class="form-check-label" for="javascript-libraries">Javascript Libraries</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input" id="node.js">
<label class="form-check-label" for="node.js">Node.js</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input" id="buildtools">
<label class="form-check-label" for="buildtools">Build Tools</label>
</div>
</div>
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input" id="es2015">
<label class="form-check-label" for="es2015">ES2015</label>
</div>
</div>
<hr class="my-4">
<h5 class="mb-4">Payment</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" required>
<div class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-lg form-group">
<label for="zip">Zip Code:</label>
<input class="form-control" id="zip" type="text" required>
<div class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-lg form-group">
<label for="cvv">CVV:</label>
<input class="form-control" id="cvv" type="text" required>
<div class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<label>Expiration Date:</label>
<div class="form-row">
<div class="form-group col-lg-3">
<select class="custom-select form-control" id="exp-month" required>
<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 class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="form-group col-lg-3">
<select class="custom-select form-control" id="exp-year" required>
<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 class="invalid-feedback">
Required.
</div>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<hr class="mb-4">
<button type="submit" class="btn btn-success btn-md">Register</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>
<!-- /registration -->
</div>
</div>
</div>
</div>
Thank you for your help!