Implement MDB-Select server-side validation

Topic: Implement MDB-Select server-side validation

IT_Santini priority asked 2 years ago

Expected behavior When server side validation return error on select field, it can add is-invalid class and display div class="invalid-feedback" with error message text below select input

Actual behavior When server side validation return error on select field, it cannot set styling with just adding is-invalid class or add div class="invalid-feedback" with error message text displayed

Resources (screenshots, code snippets etc.)

Michał Duszak staff commented 2 years ago

Hello, how is your validation implemented? Could you show me a snippet which will reproduce this behaviour?

Add comment

Michał Duszak staff answered 2 years ago

0 1 Best answer

Here's a proper validation for Select: https://mdbootstrap.com/snippets/standard/m-duszak/3462979

https://mdbootstrap.com/docs/standard/forms/select/#section-validation

IT_Santini priority commented 2 years ago

From your example, validation happens at client side. What I'm trying to achieve is validation from server side. For Example: User cannot choose option two, but the validation check is done in server, not in client side How can I achieve this?

Michał Duszak staff commented 2 years ago

This is the provided validation for the select input MDB provides. It checks if select provides any option. If you wouldn't like user to provide certain options, you could disable them, or check their values on the server side, and then clear the select's value so that it will display invalid styles.

Add comment

Swindler free answered 1 year ago

0 0 Best answer

has this problem not been resolved? the issue described 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?

Mateusz Lazaru staff commented 1 year ago

It creates input and the input gets :invalid or :valid pseudo classes. Dispalyed feedback message is based on the pseudo class.

swizard priority commented 5 days ago

How to do it from JS? I need to put .is-invalid class on the visible input Adding is-invalid to select does not solve the problem. For example I have 2 selects: one for country and another for state. In case state does not belong to corresponding country I need to make :invalid my States select. How to implement server side validation?

swizard priority commented 4 days ago

Ok, maybe it will be helpful for somebody: to do server side validation with MDB Select component you need to make changes to sources of Select.

Changes to MDB5-STANDARD-UI-KIT-Pro-Advanced-8.0.0

src/mdb/pro/select/index.js 44: add: ,invalid: false
src/mdb/js/pro/select/templates.js 39: add: if (config.invalid) { Manipulator.addClass(input, 'is-invalid'); } 73. del: } 85. add: }
index.html 55: replace type="text/javascript" src="js/mdb.umd.min.js" with type="module" src="src/mdb/js/mdb.pro.umd.js"

Then npm run build from console (I tested with node 20.18.0) and you will get module with server side select validation (you should not use was-validated or needs-validation on the form)

After that you can add data-mdb-invalid = "true" to your select and it will be marked as Invalid. Error message you should add yourself

Sorry for punctuation.

Please insert min. 15 characters.

Add comment

IT_Santini priority answered 2 years ago

0 0 Best answer