Validate-jjrdev NPM

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
min	Inteiro	`null`	`99`	Valor numérico mínimo do campo
max	Inteiro	`null`	`99`	Valor numérico máximo do campo
length	Inteiro	`null`	`12`	Quantidade exata de caracteres no campo
equalTo	String	`null`	`password`	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, min, max, 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 a validação e envia o formulário | form.validate.submit() | | valid | Executa a validação do formulário e retorna se é válido | form.validate.valid() |

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().