I am working with a <select> element that includes both the multiple and required attributes. However, the field is not behaving as expected. When the field is left empty, the form still allows submission, even though it should be marked as required.
My objective is to prevent the form from being submitted if no options are selected in this multi-select dropdown, and to display an appropriate error message to the user. I am looking for a reliable solution to enforce validation on this field before form submission.
Code :
{{ 'customer.register.ranges_interested' | t }}* Range of Interest is not Selected
submit button :
<button type=“submit” onclick=“return validateRegisterForm();”{% if settings.button_style == ‘inv’ %} class=“inv”{% endif %}>{{ ‘customer.register.submit’ | t }}
Java Script : if (rangeInterest.length === 0 || rangeInterest.includes(“—”) || (rangeInterest.length === 1 && rangeInterest[0].trim() === “”)) {
document.getElementById(“blankRangeInterest”).classList.remove(“setDisplayNone”);
}
else{
document.getElementById(“blankRangeInterest”).classList.add(“setDisplayNone”);
isValidRangeInterest = true;
}
return isValid;