Validate.js - Validação de formulário em JavaScript

O pacote Validate.js fornece uma validação simples e personalizada para formulários HTML em JavaScript puro.

Baixando

NPM

Utilize o comando npm i validate-jjrdev para instalar o pacote Validate.js.

GitHub

Baixe o arquivo diretamente do repositório GitHub clicando aqui.

Instalando

O pacote Validate.js possui suporte para uso Asynchronous Module Definition padrão do JavaScript para uso na tag <script>:

Arquivo local

<script src="./validate.js"></script>

CDN

<script src="https://cdn.jsdelivr.net/npm/validate-jjrdev@latest/validate.js"></script>

Defina a versão manualmente alterando latest para a versão desejada.

Usando

A validação do formulário deve ser realizada da seguinte forma:

const validate = new Validate();

validate.form("form#validate", {
    rules: {
        // Regras de validação
    },
    messages: {
        // Mensagens de validação
    },
    submitHandler: (data, form) => {
        // Callback de sucesso
    },
});

Regras

As regras de cada campo do formulário deve ser definida na propriedade rules do objeto, como por exemplo:

rules: {
    "name": {
        required: true,
        name: true
    },
    "phone": {
        required: true,
        minlength: 14,
        maxlength: 15
    }
}

| Opção | Tipo | Padrão | Exemplo | Descrição | | --------- | -------------- | ------- | ----------------------- | ----------------------------------------------------------- | | required | Boleano | false | true | Campo obrigatório | | email | Boleano | false | true | Campo de email | | minlength | Inteiro | null | 8 | Quantidade mínima de caracteres no campo | | maxlength | Inteiro | null | 15 | Quantidade máxima de caracteres no campo | | length | Inteiro | null | 12 | Quantidade exata de caracteres no campo | | equalTo | String | null | form#password-confirm | Campo deve ser igual a outro campo | | name | Boleano | false | true | Campo deve ser um texto sem caracteres especiais ou números | | pattern | String (regex) | null | [1-9] | Campo deve corresponder um regex |

É possível definir as regras required, minlength, e maxlength diretamente na tag HTML, por exemplo:

<input required /> <input minlength="10" maxlength="15" />

Mensagens

As mensagens de cada campo do formulário deve ser definida na propriedade messages do objeto, como por exemplo:

messages: {
    "name": {
        required: "Informe um nome",
        name: "Informe um nome válido"
    },
    "phone": {
        required: "Informe um telefone",
        minlength: "Informe um telefone maior",
        maxlength: "Informe um telefone menor"
    }
}

Mensagens não definidas retornará um aviso vazio ("").

Parentes

As mensagens de erro são automaticamente adicionadas no mesmo elemento pai onde o campo está localizado, contudo, certos momentos pode ser necessário adicionar a mensagem em algum elemento mais acima, isso pode ser definido na propriedade parents do objeto, como por exemplo:

parents: {
    "name": 1
}

Callback de sucesso

A fução definida na propriedade submitHandler é executada quando todas as regras são validadas e aprovadas, retornando sempre as variáveis data com campos e valores e form com o elemento do formulário (útil para executar ações no formulário), como por exemplo:

submitHandler: (data, form) => {
    console.log(data);
};

Métodos de campos

Os campos do formulários recebem alguns métodos dentro do objeto validate, por exemplo:

input.validate.addRule("maxlength", 15);

| Método | Descrição | Exemplo | | ---------------- | ------------------------------------------- | --------------------------------------------------------------------------------------- | | addRule | Adicionar regra ao campo | input.validate.addRule('maxlength', 15) | | addRules | Adicionar múltiplas regras ao campo | input.validate.addRules([ {maxlength: { value: 15} }, {required: { value: true } } ]) | | removeRule | Remover regra do campo | input.validate.removeRule('maxlength'); | | removeRules | Remover múltiplas regras do campo | input.validate.removeRules(['maxlength', 'required']) | | hasRule | Verifica se existe a regra no campo | input.validate.hasRule('length') | | isRequired | Verifica se o campo é obrigatório | input.validate.isRequired() | | isOptional | Verifica se o campo é opcional | input.validate.isOptional() | | isOptionalEmpty | Verifica se o campo é opcional e está vazio | input.validate.isOptional() | | isEmpty | Verifica se o campo está vazio | input.validate.isEmpty() | | showErrorMessage | Exibir mensagem de erro no campo | input.validate.showErrorMessage('message') |

Métodos de formulário

O formulário, assim como o campo, recebe alguns métodos no objeto validate, por exemplo: | Método | Descrição | Exemplo | | ---------------- | ------------------------------------------- | --------------------------------------------------------------------------------------- | | removeErrorMessages | Remove todas as mensagens de erros | form.validate.removeErrorMessages() | | submit | Executa o envio do formulário | form.validate.submit() |

O método form.submit() do próprio objeto DOM não realiza a validação dos campos, por isso é altamente recomendável que se utilize o form.validate.submit().

Licença

O Validate.Js é um software de código aberto sob a MIT License.