Topic: Multiple Material Select issue and validation Issue

abelgriffen pro asked 5 years ago


Hi, I am having issue when having multiple Material Select on the same page. If you open select menu and then select the other one, then the length of the second one pushes the body down. Find an example on the link https://www.dropbox.com/s/9j6p9tj4enor4wl/MaterialSelect.png?dl=0 Secondly how can I do validation on Material Select?

Adrian Sawicki free answered 5 years ago


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

abelgriffen pro answered 5 years ago


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.

Adrian Sawicki free answered 5 years ago


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 
}

abelgriffen pro answered 5 years ago


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>

Adrian Sawicki free answered 5 years ago


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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags