Form select validation with javascript

Topic: Form select validation with javascript

Randy Deborggraeve priority asked 2 months ago

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?

Add comment

Kamila Pieńkowska staff answered 2 months ago

1 0 Best answer

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 priority commented 2 months 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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

Randy Deborggraeve

0Support score
1Questions 0Answers 0Snippets