Validate Forms in Materialize

Question

Validate Forms in Materialize

Navigation

#1 by (0 votes)

1

How can I validate forms by Materialize?

I'm trying to use jquery-validate for this but it 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 only go green when it's valid?

My Form code:

<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);
            }
        }
    });
});

javascript html css materialize

asked by anonymous 16.03.2018 / 16:00

1 answer

Pass the id of an element as a parameter to a function? Chronologically order date and time VBA

score 0 · Answer 1

I do not know if it might interest you, but I'll give you an answer using only validation from the Customer side.

Materialize already has some of its own styles to show input validation. In case it changes the color of the line where the input value is written, then I will not touch it ...

I just made some rules to validate the <input> from the 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 only field, does not accept numbers , you must be 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 and not 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><scriptsrc="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 already have an "intrinsic validation" done by HTML5, for example <input type="email"> must have a @ , you do not need to set this, this is already a default in>.

Link with Inpute Tipes documentation: link