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
christianmaina
Full Stack JavaScript Techdegree Student 4,967 PointsForm validation - Checkboxes - Displaying message
Hi there,
For the "Build an Interactive Form" project in the JavaScript course, there is a step which includes form validation. There are several checkboxes in the form and at least one of them must be selected for the form to be submitted. In case none is checked, a message should be displayed by the form. I've been having trouble displaying just one message. Each time the Submit button is clicked, a new message appears.
Any help on displaying just one message?
Thanks in advance!
Here's the code:
form.addEventListener ("submit", function (evt) {
if ( document.querySelectorAll("input[type=checkbox]:checked").length == 0 ) {
evt.preventDefault();
var error = document.createElement('h3')
error.id = "error"
error.style.color = "crimson"
var fieldsetAct = document.getElementById("activities");
fieldsetAct.appendChild(error)
error.textContent = "Choose at least one activity."
} else {
var error = document.getElementById("error")
fieldsetAct.removeChild(error)
}
}
3 Answers
egaratkaoroprat
16,630 PointsThe reason this happens is that the appendChild() method adds up and does not replace the content, so the h3 keeps adding up when you hit the submit button. In order to achieve that, you might probably want to try innerHTML (this is not a method, but a property - so to insert a content you have to do this: element.innerHTML = '<h3>Error</h3>').
Since you have selected the element with the ID 'activities', I guess that there is already some kind of content in it. If you do not wish to replace the content of that element, you might want to place another div inside the 'activities' filed and select that instead. And use it as a container for your error message.
It might look something like this:
form.addEventListener ("submit", function (evt) {
if ( document.querySelectorAll("input[type=checkbox]:checked").length == 0 ) {
evt.preventDefault();
error.id = "error"
error.style.color = "crimson"
var errorContainer = document.getElementById("error-container"); // looks maybe something like this in your HTML: <div id="activities"><div id="error-container"></div></div>
errorContainer.innerHTML = "<h3>Choose at least one activity.</h3>"
}
}
Good luck!
christianmaina
Full Stack JavaScript Techdegree Student 4,967 PointsGot it! Its working now. ;)
Thanks, Egarat!
Dale Sublett
14,231 PointsI know this thread is almost two years old, but I am currently building a form that is requiring me to use JS to validate checkboxes, so does anybody have the link to that "build an interactive form" project? I searched for it but it isn't coming up. Thanks