Topic: Form select validation with javascript
Hi,
I have a form, where i use javascript to parse the form, put it in a json object and submit to an API.
For normal text input i can add/remove the "is-valid" or "is-invalid" class to show validation result. But how this work for select dropdown? i cannot find information about this.
<select data-mdb-select-init id="shipping_country">
<option value="" disabled selected>--- Select country ---</option>
<option value="DE">Germany</option>
<option value="BE">Belgium</option>
<option value="NL">Netherlands</option>
</select>
<label class="form-label select-label">Country</label>
When i use dev tools in browser, this became:
<div id="select-wrapper-shipping_country" class="select-wrapper"><div class="form-outline" data-mdb-input-init="" data-mdb-input-initialized="true"><input class="form-control select-input" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true" data-np-autofill-field-type="country"><label class="form-label select-label active" style="margin-left: 0px;">Country</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: 52.8px;"></div><div class="form-notch-trailing"></div></div><div class="form-label select-fake-value active">--- Select country ---</div></div><select data-mdb-select-init="" id="shipping_country" class="select-initialized" data-mdb-select-initialized="true" data-np-autofill-field-type="country" data-mdb-validation="false">
<option value="" disabled="" selected="">--- Select country ---</option>
<option value="DE">Germany</option>
<option value="BE">Belgium</option>
<option value="NL">Netherlands</option>
</select></div>
When i manually set the "is-invalid" class to the "select-wrapper-..." / div / input element, then it show correctly, but how to do this in javascript?
Here is example of select validation: https://mdbootstrap.com/docs/standard/forms/select/#section-validation
If you don't want to rely on browser validation you can assign validation classes to select Input with JS: https://mdbootstrap.com/snippets/standard/kpienkowska/6269533
Randy Deborggraeve pro premium priority commented a year ago
The snippet was the solution i was looking for. U should add this to the documentation. For people who process forms in javascript and post them to a rest API this is very usefull and required documentation.
I've been able to get .is-invalid and .is-valid classes to work with select elements by applying them to the generated input fields associated with the select.
For example:
document.getElementById('select-input-{yourId}').classList.add('is-invalid');
Kamila Pieńkowska staff commented 4 months ago
That’s a great approach — applying the validation classes directly to the generated input element is indeed a valid and effective method. We’re glad to hear you found a solution that works for your case!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: PC
- Browser: Firefox
- OS: W11
- Provided sample code: No
- Provided link: No