Material Select Validation


Topic: Material Select Validation

andy@ipower.uk.com pro premium priority asked 5 years ago

I am trying to implement Material Select Validation as per the snippet, this work 100% for a single select however i have a form with 3x Material Select inputs - could someone please explain how i can modify the snippet so that validation works for all 3 select inputs


Grzegorz Bujański staff commented 5 years ago

Hi.

Have you tried adding another select with the required option?


andy@ipower.uk.com pro premium priority commented 5 years ago

Hello, Yes i have them with the required option, the problem is that when i include the code below as per the example all 3 selects get the title "Choose your country" - sure i can change the code but all 3 always have the same - how can i add this code for each select ?

$(document).ready(function() { $('.mdb-select').materialSelect(); $('.mdb-select.select-wrapper .select-dropdown').val("").removeAttr('readonly').attr("placeholder", "Choose your country ").prop('required', true).addClass('form-control').css('background-color', '#fff'); });


Grzegorz Bujański staff commented 5 years ago

Please create snippet here: https://mdbootstrap.com/snippets/ I'll look at this.


andy@ipower.uk.com pro premium priority commented 5 years ago

Hello, I created a snippet - https://mdbootstrap.com/snippets/jquery/andyipower-uk-com/1775628

I goal is to achieve validation on each item in the form


Grzegorz Bujański staff commented 5 years ago

Ok. Try to wrap each select in a separate div and give it an id. Then in Your Js catch element like this: $('#myId').find('.select-dropdown').val('').prop('placeholder', 'No countries selected')


andy@ipower.uk.com pro premium priority commented 5 years ago

thankyou this is working perfectly


Grzegorz Bujański staff commented 5 years ago

I'm glad I helped you


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.12.0
  • Device: Windows 10
  • Browser: All
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: No