Hello, The easiest way to validate multiple selects would be adding to them different classes ( so you could divide them ). After you do that you can use the previous solution which you have at the top of our conversation. The only difference will be getting options by for example: $('.exampleClas1').find('li') and more if statements. If you will need more help with it, feel free to ask. Regards

---

Thank you for all the solutions. Can you help me how to validate multiple select menu on the same section. e.g if I am processing a credit card, I want Month and Year to be validated and there might be other drop down's on the page as well.

---

You can modify the height of your select dropdown by overwriting our styles.

.select-dropdown {
  max-height: 200px !important; <-- you can modify max-height as much as you need 
}

---

I am using Chrome 56.0.2924.87 but of course I would like this to be cross browser compatible. <div class="container"> <div class="row"> <div class="md-form col-sm-4"> <select class="mdb-select"> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Example label</label> </div> <div class="md-form col-sm-4 offset-sm-1"> <select class="mdb-select"> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Example label</label> </div> </div> </div>

---

Hi Abelgriffen, Could you show me your code? and what browser are you using? Here you have an example of Material Select Validation: HTML :

<form action="#">
        <select class="mdb-select">
            <option value="" disabled selected>Choose your option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <label for="form6" >Example label</label>
        
        <input id="submit" type="submit">
</form>

JavaScript:

$(document).ready(function() {
    $('.mdb-select').material_select();

var validate = '';
var submit = $('#submit');
$('li').on('click', function() {
    validate = this.innerText;
    return validate;
});

submit.on('click', function(e){
    if (validate != ''){
        console.log(validate);
    } else {
        e.preventDefault();
        console.log("prevent submit")
    }
});

Normal required isn't working with Material Select and if you want a tooltip you can add it by JavaScript. Regards

---