mdb-select / validation / error message and valid


Topic: mdb-select / validation / error message and valid

Tom06 asked 2 years ago

Hello,

i would like to have severals mdb-select on the same page. One for exemple, for sport (and severals options) , an another for hobbies (options with differents hobbies), and third, ...and have a submit button with check validations for each select.

with error messages + valid message for each and differents. (for sport, 'please select your favorites sport), for hobbies (please select your favorites hobbies) , etc... same for valid messages

I try to used this snippet, ("country" part), but it is just for one mdb select. https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1114462

When i try to add two or severals mdb select, the check is not for each mdb select, and often it is validated directly as soons as i submit, where as others mbd-select were not good.

Could you please help me, i don't find the solution, even if i suppose it is simple.

html + js illustration or code could be great.

thanks in advance guys


Grzegorz Bujański staff commented 2 years ago

Hi. Please create snippet and show me how you do that. I will look at this.


Tom06 commented 2 years ago

I saw the documentation for validation on the page https://mdbootstrap.com/docs/jquery/forms/select/ with this code

$(document).ready(function() { $('.mdb-select.validate').materialSelect({ validate: true, labels: { validFeedback: 'Correct choice', invalidFeedback: 'Wrong choice' } }); function validateSelect(e) { e.preventDefault(); $('.needs-validation').addClass('was-validated'); if ($('.needs-validation select').val() === null) { $('.needs-validation').find('.valid-feedback').hide(); $('.needs-validation').find('.invalid-feedback').show(); $('.needs-validation').find('.select-dropdown').val('').prop('placeholder', 'No countries selected') } else { $('.needs-validation').find('.valid-feedback').show(); $('.needs-validation').find('.invalid-feedback').hide(); } } $('.needs-validation select').on('change', e => validateSelect(e)) $('.needs-validation').on('submit', e => validateSelect(e)) });

i would like to have more et more mbd-select on the same page, and for each select, indivual validation and error message (with green check or red cross icon) after clicking the "submit" button.


Grzegorz Bujański staff commented 2 years ago

I still need your code snippet, to look at it, and find solution for you. Please create snippet here: https://mdbootstrap.com/snippets/ I will look at this.


Tom06 commented 2 years ago

thank you. please find the snippet : https://mdbootstrap.com/snippets/jquery/tom06/2021283 thanks


Grzegorz Bujański staff answered 2 years ago

Look at this code:

$('.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');

  // SECOND SELECT  - DOESN'T WORK
$('.mdb-select').materialSelect();
$('.mdb-select.select-wrapper .select-dropdown').val("").removeAttr('readonly').attr("placeholder",
"Choose your city ").prop('required', true).addClass('form-control').css('background-color', '#fff');

  // THIRD SELECT  - DOESN'T WORK
$('.mdb-select').materialSelect();
$('.mdb-select.select-wrapper .select-dropdown').val("").removeAttr('readonly').attr("placeholder",
"Choose your hobby ").prop('required', true).addClass('form-control').css('background-color', '#fff');

you do the same thing 3 times for the same elements (you use the same selectors). Try to use unique ids.


Tom06 commented 2 years ago

i had updated the snippet, but I had already try to do this. No valid/invalid messages, no green tick/Red Cross for each one. I tried lot of things but I don't know how to do. thanks you in advance, you can update my snippet if you want/please.


Grzegorz Bujański staff answered 2 years ago

How about this?

function validateSelect(e) {
  const $select = $('.needs-validation select')
  e.preventDefault();

  $select.each((i ,el) => {
    if ($(el).val() != null) {
        $(el).parent().siblings('.valid-feedback').show();
        $(el).parent().siblings('.invalid-feedback').hide();
    } else {
      $(el).parent().siblings('.valid-feedback').hide();
        $(el).parent().siblings('.invalid-feedback').show();
    }
  });
}

$('.needs-validation select').on('change', e => validateSelect(e));
$('.needs-validation').on('submit', e => validateSelect(e));

Try use this in your code. Should help :)


Tom06 commented 2 years ago

Than you Grzegorz ! Looks fine ! Thanks for you help


Tom06 commented 2 years ago

I tried to send a function if validation is correct during the submit.

I don't know how I can keep the signal when it is good

$('.needs-validation select').on('change', e => validateSelect(e)); $('.needs-validation').on('submit', function(e) { e => validateSelect(e); alert(e); // doesn't work.. I have "object object" if ("validation function return OK){ SEND_DATA(); }; } );

could you please help me


Grzegorz Bujański staff answered 2 years ago

One more thing. If you want to have green tick/Red Cross after validate you should also delete feedback divs from select and use init with validate options and feedback message:

$('#country').materialSelect({
        validate: true,
      labels: {
      validFeedback: 'Looks good!',
      invalidFeedback: 'Please select a country.'
    }
  });

$('#city').materialSelect({
        validate: true,
      labels: {
      validFeedback: 'Looks good!',
      invalidFeedback: 'Please select a city.'
    }
  });

$('#hobbies').materialSelect({
    validate: true,
      labels: {
      validFeedback: 'Looks good!',
      invalidFeedback: 'Please select a hobbies.'
    }
  });

Tom06 commented 2 years ago

This part of code doesn't work for me. tried on snippet, but no cross cross/green tick


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
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.16.0
  • Device: web pages
  • Browser: chrome, firebox
  • OS: mac
  • Provided sample code: No
  • Provided link: Yes