Validate Select jqueryValidate with Materializecss

Question

Validate Select jqueryValidate with Materializecss

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

4

I found a problem that I can not solve for a while, I'm working with the framework MaterializeCSS . It has validation with some direct notations in the HTML tag, what I'm not getting is validating is when I have a select tag.

Follow 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>

jquery materialize

asked by anonymous 26.11.2015 / 00:24

3 answers

Is there any way I can import a project into Android Studio by automatically solving dependencies? Error in Manifest after upgrading from Android Studio to version 1.4

score 0 · Answer 1

Try this code. I added the tag required of html 5 and took the value of the placeholder.

<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 out this documentation: link

score 0 · Answer 2

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

    $(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><scripttype="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>

score 0 · Answer 3

material_select makes your select a display: none and jQuery Validation ignores hidden fields. To enable hidden field validation use:

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

Ps .: Use the required attribute in your select

$('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><scriptsrc="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><linkhref="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>