Validate Forms in Materialize

Question

How can I validate forms by Materialize?

I’m trying to use the jquery-validate for this but does not work, I put the rules and even when a rule is invalid the field still turns green.

How can I make the field green only when it’s valid?

My Code Form:

<form id="testeMaterialize">
    <div class="row">
        <div class="input-field col s6">
            <input type="number" id="nome" name="nome" class="validate" minlength="5" required>
            <label for="nome" data-error="Preencha o campo Nome" class="active">Nome</label>
        </div>
        <div class="input-field col s6">
                <input type="text" id="numero" name="numero" class="validate" required >
                <label for="numero" data-error="Preencha o campo Numero corretamente" class="active">Numero</label>
        </div>
    </div>
</form>

My Javascript:

$(document).ready(function(){
    validator = $("#testeMaterialize").validate({
        rules: {
            nome: {
                required: true,
                minlength: 5
            },
            numero: {
                required: true,
                minlength: 11,
                maxlength: 14
            }
        },

        messages: {
            nome: {
                required: "Por favor preencha o campo Nome",
                minlength: "O Campo nome deve ter no minimo 5 caracteres"
            },
            numero: {
                required: "Por favor preencha o campo Numero",
                minlength: "O Campo número deve ter no mínimo 11 caracteres",
                maxlength: "O Campo número deve ter no máximo 14 caracteres"
            }
        },
        errorElement : 'div',
        errorPlacement: function(error, element) {
        var placement = $(element).data('error');
        if (placement) {
                $(placement).append(error)
            } else {
                error.insertAfter(element);
            }
        }
    });
});

Answer 1

I don’t know if you might be interested, but I will give you an answer using only validation on the Client side.

Materialize already has some styles to show the validation of the input. In case it changes the color of the line where the input value is written, then I won’t touch it...

I just made a few rules to validate the <input> client side in the browser itself

pattern="[A-Za-zÀ-ú\s]+$"  //O pattern do campo só aceita letras, acentos etc
pattern="[0-9]+$"          //O pattern do campo só aceita números
required                   //o campo é de preenchimento obrigatório
minlength="2"              //tem que ter no mínimo 2 caracteres 
maxlength="20"             //e no máximo 20 caracteres 

Follow the example:

• In the Name field only accepts text, does not accept numbers, and must have a minimum of 2 characters and a maximum of 20 characters.
• In the number field it only accepts values between 1 and 20, does not accept 0 or 21 for example.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<form id="testeMaterialize">
    <div class="row">
        <div class="input-field col s6">
            <input type="text" id="nome" name="nome" class="validate" required pattern="[A-Za-zÀ-ú\s]+$" required minlength="2" maxlength="20">
            <label for="nome" data-error="Preencha o campo Nome" class="active">Nome</label>
        </div>
        <div class="input-field col s6">
            <input type="number" id="numero" name="numero" class="validate" required pattern="[0-9]+$" required min="1" max="20">
            <label for="numero" data-error="Preencha o campo Numero corretamente" class="active">Numero</label>
        </div>
    </div>
</form>

OBS: Always use the <input type=""> correct for the type of information you want type, email, phone, etc... because they all already have an "intrinsic validation" made by HTML5, for example the <input type="email"> must have a @, you don’t have to define this, this is already a rule default of type:email.

Link with Inpute Tipes documentation:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input