Validação de formulário HTML usando o Parsley

Last updated Out 18, 2021

Contente

Você está procurando aplicar validações em seu formulário HTML? As validações do lado do cliente são úteis para garantir que todos os campos do formulário sejam preenchidos e em um formato adequado. Ajuda os usuários a corrigir quaisquer dados inválidos imediatamente. Você deve sempre ter validações do lado do cliente nos formulários do seu site. Se você pular e aplicar apenas a validação do lado do servidor, isso atrasará o envio do formulário em caso de erros.

O Parsley é uma biblioteca de validação de formulários útil, de fácil integração. Esta biblioteca oferece uma UX melhor em comparação com as validações HTML5 padrão. Você precisa escrever apenas algumas declarações e pronto. O Parsley oferece um rico conjunto de opções com as quais você pode estender suas validações personalizadas. Não vou cobrir cada opção. O objetivo deste tutorial é familiarizá-lo com o Parsley e mostrar como aplicar as validações básicas. Pode-se explorar sua documentação e se familiarizar com todos os recursos que a biblioteca oferece.

Para este tutorial, vou criar um formulário simples com poucos campos como nome, email, sexo, etc. Todos os campos do formulário são obrigatórios e aplicaremos validações usando o Parsley em nosso formulário.

Para validar o formulário usando o Parsley, precisamos incluir seu arquivo JS. Vou fazer isso usando CDN.

Parsley recomenda usar seu próprio estilo para mensagens de erro. Mas, para fins de teste, você pode usar o arquivo CSS disponível neste link.

Como usar a salsa

Para fins de demonstração, vou criar um formulário usando Bootstrap. Portanto, incluirei o Bootstrap usando CDN junto com os arquivos do Parsley. Também estou incluindo o jQuery, pois Parsley depende dele.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://parsleyjs.org/src/parsley.css" />
<div class="container">
    <form class="form-horizontal" id="signup_form">
        <div class="form-group">
            <label for="inputFirstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputFirstName" name="first_name" placeholder="First Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputLastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputLastName" name="last_name" placeholder="Last Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="Email" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-4">
                <div class="gender">
                    <input type="radio" name="gender" value="male" required> Male
                    <input type="radio" name="gender" value="female" required> Female
                      
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Skills</label>
            <div class="col-sm-4">
                <div class="skills">
                    <input type="checkbox" name="skills[]" value="php" required> PHP
                    <input type="checkbox" name="skills[]" value="mysql" required> MySQL
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<script type="text/javascript">
    jQuery('#signup_form').parsley();
</script>

No código acima, incluí todos os arquivos JS e CSS necessários usando CDN. Por fim, usei $('#signup_form').parsley();onde #signup_form é o id do formulário. Agora, quando você clicar no botão Enviar diretamente, os erros serão exibidos, conforme mostrado na captura de tela abaixo.

Assim que todos os erros forem corrigidos, o Parsley permite que você envie um formulário que você então usa para processamento do lado do servidor.

Espero que você entenda a validação de formulário HTML usando o Parsley. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.

Validação de formulário HTML usando o Parsley

Como usar a salsa

Artigos relacionados