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

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

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

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

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

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

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

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

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

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

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

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
}

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

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

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

O formulário, assim como o campo, recebe alguns métodos no objeto validate, por exemplo:

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

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