Validate Select jqueryValidate with Materializecss

Question

I found a problem that I am not getting solution for a while, I am working with the framework Materializecss. It has validation with some direct notations in the HTML tag, what I’m not able to validate is when I have a tag select.

Follows the code:

<div class="input-field col s1">
    <select id="comboBasculante" name="comboBasculante">
        <option value="0" disabled selected>Selecione</option>
        <option value="1">Basculante</option>
        <option value="2">Fixo</option>
        <option value="3">Janela</option>
        <option value="4">Porta</option>
        <option value="4">Stanley</option>
    </select>
    <label data-error="wrong" data-success="right" for="comboBasculante">Produto</label>
</div>

Answer 1

The material_select makes your select a display: none and the jQuery Validation ignore hidden fields. To enable validation of hidden fields use:

$.validator.setDefaults({
  ignore: []
});

Ps.: Use the attribute in your select required

$('select').material_select();

$.validator.setDefaults({
  ignore: []
});

$("form").validate({
  errorClass: "invalid form-error",
  errorElement: 'div',
  errorPlacement: function(error, element) {
    error.appendTo(element.parent());
  }
});

.form-error {
  color: #D8000C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />

<form>
  <select required>
    <option value="">- Selecione -</option>
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
  </select>
  <br>
  <input type="submit" />
</form>

Answer 2

Try that code. I added the tag requiredhtml 5 and took placeholder value.

<div class="input-field col s1">
<select id="comboBasculante" name="comboBasculante" required>
    <option value="" disabled selected>Selecione</option>
    <option value="1">Basculante</option>
    <option value="2">Fixo</option>
    <option value="3">Janela</option>
    <option value="4">Porta</option>
    <option value="4">Stanley</option>
</select>
<label data-error="wrong" data-success="right" for="comboBasculante">Produto</label>

You can check this documentation: https://www.w3.org/TR/html5/forms.html#the-select-element

Answer 3

Add the Materialize instance,as recommended in the documentation: Documentation of the Materialize.

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

*{
background:#f1f1f1;
}
.mySelect{
margin:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script><style type="text/css"></style>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
            
        <script type="text/javascript">
  
        $(document).ready(function() {
            $('select').material_select();
        });
       
        </script>
        <div class="container">
      <div class="input-field col s1">
<select id="comboBasculante" name="comboBasculante" required>
<option value="" disabled selected>Selecione</option>
<option value="1">Basculante</option>
<option value="2">Fixo</option>
<option value="3">Janela</option>
<option value="4">Porta</option>
<option value="4">Stanley</option>
</select>
<label data-error="wrong" data-success="right" for="comboBasculante">Produto</label>
</div>