Topic: Client-side validation fails with a Chrome error when using the "required" attribute with the "select" element.

Marvin Herbold priority asked 1 year ago


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


Grzegorz Bujański staff answered 1 year ago


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...



Please insert min. 20 characters.

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 6.3.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes