Topic: Select Validation Issue
I cannot get the select field to become red, indicating a validation issue for the user.
The issue is when you create a select element, mdb.js creates an input counterpart while hiding the original select. The select is the only thing that retains the class 'is-invalid' and does not extend that class over to the newly created input field.
This is annoying because it works this way with every other field type except select. is there a solution to this problem?
The generated input field does not possess a pseudo class :valid or :invalid.
This is my html code:
<select class="select is-invalid select-initialized" name="program_id" data-mdb-placeholder="Select Program" data-mdb-filter="true" id="program-id"><option value="" selected="selected"></option><optgroup label="SPORTS"><option value="126"> HS Girls Lacrosse 2021</option></optgroup></select>
The generated code is:
<div class="form-outline"><input class="form-control select-input" type="text" role="combobox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" placeholder="Select Program" readonly="true"><label class="form-label select-label" style="margin-left: 0px;">Program</label><span class="select-arrow"></span><div class="form-notch"><div class="form-notch-leading" style="width: 9px;"></div><div class="form-notch-middle" style="width: 59.2px;"></div><div class="form-notch-trailing"></div></div><div class="form-label select-fake-value"></div></div>
You can try this . The select element always wrapped inside a wrapper so you can get that wrapper element by using closest and then search for the input inside it.
while your code gave me a good idea, I personally believe this code will be of more help to people as long as the select generated contains the .is-invalid class on page load if error exists during validation.
window.addEventListener('load', function() {
// Find all select fields with the class "select is-invalid"
const selectFields = document.querySelectorAll('.select.is-invalid');
// Loop through all select fields
selectFields.forEach(selectField => {
// Access the div with class "form-outline" above the element
const formOutline = selectField.previousElementSibling;
if (formOutline.classList.contains('form-outline')) {
// If the div is found, add the class "is-invalid" to the input field within the div
const inputField = formOutline.querySelector('input[type=\"text\"]');
inputField.classList.add('is-invalid');
}
}); });
Quang Huy Nguyễn pro premium priority commented 2 years ago
Mentioning custom form validation I think it's more like a javascript kinda thing than a page content generating kinda thing since you probably wanna add, change or remove validation state when value change event triggered instead of keeping them fixed. Btw you shouldn't use previousElementSibling, if one day the dev decided to change the position a bit or just adding something between the form-outline div and the select you gonna have to change your code according to that.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: ALL
- Browser: ALL
- OS: ALL
- Provided sample code: No
- Provided link: No