Topic: Client-side validation fails with a Chrome error when using the "required" attribute with the "select" element.
Client-side validation fails with a Chrome error when using the "required" attribute with the "select" element.
This is a very simple form with a select drop down with the required attribute and a submit button. Chrome throws a console error and does not submit the form. No client side error message is shown.
The Chrome error indicates that it doesn't like the "display: none" CSS style on the select input because it prevents Chrome from showing client-side form validation messages.
https://mdbootstrap.com/snippets/standard/marvin_herbold/5341059
To fully personalize select dropdown and select could still be submitted in forms, we had to hide the native select and create an overlay that would be visible to the user. That's why this error occurs. Unfortunately, I'm afraid there's not much we can do about it. We'll check it out, but initially I couldn't find a solution that would work for chrome's default validation.
For now, I can suggest using our validation: https://mdbootstrap.com/docs/standard/forms/select/#section-validation
Marvin Herbold priority commented 1 year ago
I think the solution is to move the "required" attribute from the hidden < select > element to the visible < input > element that is created by MDB. That is what I am doing now as a workaround and it seems to work well.
Marvin Herbold priority commented 1 year ago
But of course then Chrome decides to ignore client-side validation for this < input > element even though the "required" attribute is set on it, because it also has the read-only attribute. Hm...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.3.1
- Device: PC
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes