1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: jquery mdb-select with invalid class

mtutumlu pro asked 6 years ago

I can display form error messages for text fields but not able to do it for mdb-select although I added active and invalid classes to the select attribute and data-error to the label. It is working with text input but not with select.   How can I do that?

Jakub Strebeyko staff answered 6 years ago

Hello there mtutumlu,

Thanks for clarifying the issue. .mdb-select elements validation is not available by default yet, but possible with a custom JS function. One of solutions could be i.e. looking into value attribute of an element with .active class within mdb-select, checking whether it's any of valid options and changing display features of mdb-select element accordingly.

With Best Regards,
Kuba

mtutumlu pro commented 6 years ago

Actually, the problem is not validation. It is about "Displaying Error Message". After validation completed I cannot make the mdb-select filed red in color with shown error message, even if I add the related attributes as it is done for a text field. Sadly, this is not answering my question again :(

Jakub Strebeyko staff commented 6 years ago

Hi, Have you considered solving the problem by creating a custom JS function? You could be adding red-coloring styles (border-bottom: 1px solid #F44336; box-shadow: 0 1px 0 0 #F44336;) to the select element; moreover – you could be displaying the error message in the label's ::after pseudoelement with content: attr(data-error); color: #F44336; opacity: 1;. With the Bestest of Regards, Kuba

mtutumlu pro commented 6 years ago

Actually I was trying to make it with build in css/js. If custom js/css is in consider, there will be plenty of solutions. Therefore, it means use of .active and .invalid classes with data-error="" attribute is not working with .mdb-select, am I right? Just I want to be sure that I am using the library in the right way...

Jakub Strebeyko staff commented 6 years ago

You are right, sir.

Jakub Strebeyko staff answered 6 years ago

Hi mtutumlu, Thanks for reaching out! Could you be a little more specific about the outcome you're expecting from the error message and perhaps some code for us to work on? If by chance you have HTML5-style validation of mdb-select on mind, there is no such thing available yet, as MDB hides (display: none) the default selection fields to replace them with their material design counterparts using JS. With Best Regards, Kuba

mtutumlu pro commented 6 years ago

Hello Jakub, Thank you for the reply. Okay, here is the scenario: The form page is loaded and filled by a user, then the submit button is clicked, then the same page with form is reloaded from the server with some error messages. The page is reloaded with the html form fields shown in the first image. It supposed to show error messages but it shows the error message only for the text field, not for the mdb-select. Here is the HTML: https://drive.google.com/file/d/1TvbKqP_wAPkYO0XVs6dI5el6bSvddzWk/view?usp=sharing And the result in browser: https://drive.google.com/file/d/13JiFqh0Sp6Fhp-ef3XcSoSyhFMgFGwmD/view?usp=sharing  

mtutumlu pro commented 6 years ago

Hello Jakub, it seems you supposed to write your reply as comment because your reply is displayed as an answer, which is not answering the actual question.

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
mtutumlu
Pro User 2Support score
2Questions 0Answers 0Snippets