As one comment suggested, the dependence on the id attribute could be decreased - For example, if the location of the error message element was consistent within each section -e.g. a sibling of the list of checkbox inputs. Another solution might be to have each section of checkboxes and error message contained by a parent element with a consistent class name- then the JavaScript could loop over those container elements looking to see if the checkbox elements have any checked- if not, then display the error message.
As one comment suggested, the dependence on the id attribute could be decreased if the location of the error message element was consistent within each section -e.g. a sibling of the list of checkbox inputs.
As one comment suggested, the dependence on the id attribute could be decreased - For example, if the location of the error message element was consistent within each section -e.g. a sibling of the list of checkbox inputs. Another solution might be to have each section of checkboxes and error message contained by a parent element with a consistent class name- then the JavaScript could loop over those container elements looking to see if the checkbox elements have any checked- if not, then display the error message.
Repeated code
Modern browsers support client-side validation using the required attribute on input elements1 and it is supported for checkbox inputs2 but apparently setting a custom message for checkboxes still involves writing some JavaScript3 .
HTML layout
As one comment suggested, the dependence on the id attribute could be decreased if the location of the error message element was consistent within each section -e.g. a sibling of the list of checkbox inputs.
const SELECTOR_ERROR_MAPPING = {
"#sources input[type=checkbox]:checked": "#lblSourcesError",
"#academicFormatsRow input[type=checkbox]:checked": "#lblacademicFormatError",
"#academicMediaFormatRow input[type=checkbox]:checked": "#lblacademicmediaFormatError",
//...more entries
};
document.forms[0].addEventListener('submit', e => {
e.stopPropagation();
e.preventDefault();
for (const allValid[selector, =errorSelector] of Object.keysentries(SELECTOR_ERROR_MAPPING).every(function(selector) {
const errorSelector = SELECTOR_ERROR_MAPPING[selector];
const showError = !document.querySelectorAll(selector).length;
document.querySelector(errorSelector).classList.toggle('hidden', !showError);
returnif !showError;(showError) {
});
console.log('result', allValid); return false;
return allValid; }
}
});.error {
color: red;
}
.hidden {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="requestForm">
<div id="sources">
<h3> Source </h3>
<label>Audi
<input type="checkbox" name="source" value="Audi" />
</label>
<label>BMW
<input type="checkbox" name="source" value="BMW" />
</label>
<div class="error hidden" id="lblSourcesError">Please select a source</div>
</div>
<div id="academicFormatsRow">
<h3> Formats </h3>
<label>College
<input type="checkbox" name="source" value="college" />
</label>
<label>University
<input type="checkbox" name="source" value="university" />
</label>
<div class="error hidden" id="lblacademicFormatError">Please select a format</div>
</div>
<div id="academicMediaFormatRow">
<h3> Media Formats </h3>
<label>DVD
<input type="checkbox" name="source" value="DVD" />
</label>
<label>Blue-ray
<input type="checkbox" name="source" value="blueray" />
</label>
<div class="error hidden" id="lblacademicmediaFormatError">Please select a media format</div>
</div>
<button>Submit</button>
</form> Modern browsers support client-side validation using the required attribute on input elements1 and it is supported for checkbox inputs2 but apparently setting a custom message for checkboxes still involves writing some JavaScript3 .
const SELECTOR_ERROR_MAPPING = {
"#sources input[type=checkbox]:checked": "#lblSourcesError",
"#academicFormatsRow input[type=checkbox]:checked": "#lblacademicFormatError",
"#academicMediaFormatRow input[type=checkbox]:checked": "#lblacademicmediaFormatError",
//...more entries
};
document.forms[0].addEventListener('submit', e => {
e.stopPropagation();
e.preventDefault();
const allValid = Object.keys(SELECTOR_ERROR_MAPPING).every(function(selector) {
const errorSelector = SELECTOR_ERROR_MAPPING[selector];
const showError = !document.querySelectorAll(selector).length;
document.querySelector(errorSelector).classList.toggle('hidden', !showError);
return !showError;
});
console.log('result', allValid);
return allValid;
});.error {
color: red;
}
.hidden {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="requestForm">
<div id="sources">
<h3> Source </h3>
<label>Audi
<input type="checkbox" name="source" value="Audi" />
</label>
<label>BMW
<input type="checkbox" name="source" value="BMW" />
</label>
<div class="error hidden" id="lblSourcesError">Please select a source</div>
</div>
<div id="academicFormatsRow">
<h3> Formats </h3>
<label>College
<input type="checkbox" name="source" value="college" />
</label>
<label>University
<input type="checkbox" name="source" value="university" />
</label>
<div class="error hidden" id="lblacademicFormatError">Please select a format</div>
</div>
<div id="academicMediaFormatRow">
<h3> Media Formats </h3>
<label>DVD
<input type="checkbox" name="source" value="DVD" />
</label>
<label>Blue-ray
<input type="checkbox" name="source" value="blueray" />
</label>
<div class="error hidden" id="lblacademicmediaFormatError">Please select a media format</div>
</div>
<button>Submit</button>
</form>Repeated code
Modern browsers support client-side validation using the required attribute on input elements1 and it is supported for checkbox inputs2 but apparently setting a custom message for checkboxes still involves writing some JavaScript3 .
HTML layout
As one comment suggested, the dependence on the id attribute could be decreased if the location of the error message element was consistent within each section -e.g. a sibling of the list of checkbox inputs.
const SELECTOR_ERROR_MAPPING = {
"#sources input[type=checkbox]:checked": "#lblSourcesError",
"#academicFormatsRow input[type=checkbox]:checked": "#lblacademicFormatError",
"#academicMediaFormatRow input[type=checkbox]:checked": "#lblacademicmediaFormatError",
//...more entries
};
document.forms[0].addEventListener('submit', e => {
e.stopPropagation();
e.preventDefault();
for (const [selector, errorSelector] of Object.entries(SELECTOR_ERROR_MAPPING)) {
const showError = !document.querySelectorAll(selector).length;
document.querySelector(errorSelector).classList.toggle('hidden', !showError);
if (showError) {
return false;
}
}
});.error {
color: red;
}
.hidden {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="requestForm">
<div id="sources">
<h3> Source </h3>
<label>Audi
<input type="checkbox" name="source" value="Audi" />
</label>
<label>BMW
<input type="checkbox" name="source" value="BMW" />
</label>
<div class="error hidden" id="lblSourcesError">Please select a source</div>
</div>
<div id="academicFormatsRow">
<h3> Formats </h3>
<label>College
<input type="checkbox" name="source" value="college" />
</label>
<label>University
<input type="checkbox" name="source" value="university" />
</label>
<div class="error hidden" id="lblacademicFormatError">Please select a format</div>
</div>
<div id="academicMediaFormatRow">
<h3> Media Formats </h3>
<label>DVD
<input type="checkbox" name="source" value="DVD" />
</label>
<label>Blue-ray
<input type="checkbox" name="source" value="blueray" />
</label>
<div class="error hidden" id="lblacademicmediaFormatError">Please select a media format</div>
</div>
<button>Submit</button>
</form> The suggested code above and below simplified this by using !$(checkboxSelector).length;
The suggested code above simplified this by using !$(checkboxSelector).length;
The suggested code above and below simplified this by using !$(checkboxSelector).length;