Topic: mdb-select / validation / error message and valid
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
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 5 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.
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 5 years ago
Than you Grzegorz ! Looks fine ! Thanks for you help
Tom06 commented 5 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
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 5 years ago
This part of code doesn't work for me. tried on snippet, but no cross cross/green tick
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Grzegorz Bujański staff commented 5 years ago
Hi. Please create snippet and show me how you do that. I will look at this.
Tom06 commented 5 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 5 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 5 years ago
thank you. please find the snippet : https://mdbootstrap.com/snippets/jquery/tom06/2021283 thanks