1

Como posso fazer a validação de formulários pelo Materialize?

Estou tentando utilizar o jquery-validate para isso mas não funciona, coloco as regras e mesmo quando uma regra é invalida o campo ainda fica verde.

Como posso fazer para que o campo só fique verde quando ele está valido?

Meu código Formulário:

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

Meu 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);
            }
        }
    });
});
4
  • Vc quer validar no Banco ou apenas que mostrar do lado do usuário que o campo está invalido? Se for apenas por uma questão de UX e trocar a cor pro invalido vc resolve isso com CSS não precisa de JS
    – hugocsl
    Commented 16/03/2018 às 15:23
  • Seria para o cliente. Pensei que conseguiria fazer isso com o Materialize e o Jquery-Validator. Commented 16/03/2018 às 16:05
  • Gladson se quiser eu faço um exemplo simples de como vc valida só com CSS pelo lado do cliente mesmo. Mas para validar no Banco não é seguro. O CSS e o HTML são apenas criar algumas regras para o Input e estilizar vermelho ou verde por exemplo. Se quiser um exemplo me fala.
    – hugocsl
    Commented 16/03/2018 às 16:12
  • Eu quero Cara. Vai me ajudar bastante. Commented 16/03/2018 às 17:11

1 Resposta 1

1

Não sei se pode te interessar, mas vou te dar uma resposta utilizando apenas a validação pelo lado do Cliente.

O Materialize já tem alguns estilos próprias para mostrar a validação do input. No caso ele troca a cor da linha onde está escrito o valor do input, então não vou mexer nisso...

Fiz apenas algumas regras para validar o <input> pelo lado do cliente no próprio Browser

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 

Segue o exemplo:

  • No campo Nome só aceita texto, não aceita números, e tem que ter no mínimo 2 caracteres e no máximo 20 caracteres.
  • No campo número ele só aceita valores entre 1 e 20, não aceita 0 e nem 21 por exemplo.

<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: Sempre use o <input type=""> correto para o tipo de informação que vc quer tipo, e-mail, telefone, etc... pois todos eles já têm uma "validação intrínseco" feita pelo HTML5, por exemplo o <input type="email"> tem que ter um @, vc não precisa definir isso, essa já é uma regra default do tipo:email.

Link com documentação do Inpute Tipes:https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input

1
  • Muito obrigado pela ajuda. Commented 19/03/2018 às 12:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .