Entrar

C_FORMULARIO

  1. Principal
  2. C_FORMULARIO

C_FORMULARIO

Módulo JavaScript para criar formulários com validação dinâmica em jQuery/JavaScript

Última versão: 1.7 Atualizada em 22/06/2025

Indíce

  1. Descrição
  2. Módulos Externos
  3. Como Usar
  4. Descarregamento do módulo
  5. Implementação
  6. Classe
  7. Validações
  8. Atributos

Descrição

As linguagens CSS, JavaScript e jQuery, usadas neste projeto, são liguagens de código aberto. Este módulo permite a validação automática e dinâmica de formulários, através de condições personalizadas, integrando expressões próprias e alucando o erro a um objeto e a personalização do texto do próprio erro.

Este módulo terá atualizações regulares para correção ou aumento de funcionalidades. Caso seja detetado algum erro/problema, agradecemos que nos envie um email para emes3soft@gmail.com com a descrição, o mais detalhada possível.

Todos os objetos do formulário são limpos de espaços (" ") à esquerda e direita dos textos, exceto os que incluem como atributo ["passe","complexity","check","checked"].

Módulos externos

Este módulo foi projeta para funcionar com as versões dos seguintes módulos externos (incluidos no módulo):
  • Jquery -> versão 3.7.1
  • toast -> sem versão (alterada e adaptada)
  • Bootstrap -> versão 5.3.2
Poderá sempre adaptar para funcionar com as últimas versões dos seguintes módulo, mas tendo em conta que não seja garantido o seu normal funcionamento.

Como usar

A estrutura inicial começa com a estrutura de uma página web.

  • Ex: index.html 
    <!-- Isto é um exemplo da estrutura básica html com a chamda ao c_formulario -->
    
<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="c_formulario/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="c_formulario/c_formulario.css" rel="stylesheet" type="text/css">
        <title>Exemplo C_FORMULARIO</title>
    </head>
    <body>

    <div class="container">
      <form id="frmLogin" class="col-xxl-6 col-lg-8 col-sm-10 mx-auto mt-3">
        <fieldset>
          <div class="row">
              <div class="col">
                  <div  class="form-floating">
                      <input id="txtUtilizador" class="form-control" type="text" placeholder="?" />
                      <label for="txtUtilizador">Utilizador</label>
                  </div>
              </div>
              <div class="col">
                  <div class="form-floating">
                      <input id="txtPalavraPasse" class="form-control" type="password" placeholder="?" />
                      <label>Palavra-Passe</label>
                  </div>
              </div>
          </div>
          <div class="row mt-2">
            <div class="col">
                <div class="form-check">
                    <input id="chkPolitica" class="form-check-input" type="checkbox" />
                    <label for="chkPolitica">Concordo com as políticas do site</label>
                </div>
            </div>
          </div>
        </fieldset>
        <div class="row mt-2">
          <div class="col">
            <button id="butValidar" class="btn btn-primary" type="submit">Validar</button>
          </div>
          <div class="col">
            <button id="butLimpar" class="btn btn-danger float-end" type="button">Limpar</button>
          </div>
        </div>
      </form>
    </div>

    <script src="c_formulario/jquery-3.7.1.js"></script>
    <script src="c_formulario/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="c_formulario/b5toast.js"></script>
    <script src="c_formulario/c_formulario.js"></script>
  </body>
</html>
  • Ex: index.js 
    // Exemplo da aplicação do C_FORMULÁRIO - Validador de formulários
    
// Associa o formulário à class c_formulario
const f_Login = new c_formulario("frmLogin");

// Adição das validações ao formulário:
// Testa se o texto do objeto com o id txtUtilizador está vazio ou não contém valores
f_Login.Adiciona_Validacoes(["txtUtilizador","«txtUtilizador.val» == ''", "* Obrigatório"]);
// Testa se o texto do objeto com o id txtUtilizador contém o carater , (vírgula), pois é um carater inválido
f_Login.Adiciona_Validacoes(["txtUtilizador","«txtUtilizador.indexof(',')»", "* O nome do utilizador não pode conter o carater ,!"]);
// Testa se o texto do objeto com o id txtUtilizador não é um email válido, para ser válido tem de ser com uma estrutura parecida com aa@aa.aa
f_Login.Adiciona_Validacoes(["txtUtilizador","!«txtUtilizador.email»", "* Endereço de correio eletrónico inválido!"]);
// Testa se o texto do objeto com o id txtPalavraPasse verificando se esta contém menos que 10 carateres
f_Login.Adiciona_Validacoes(["txtPalavraPasse","«txtPalavraPasse.len» < 10", "* A palavra-passe tem de ter pelo menos 10 caracteres"]);
// Testa se o texto do objeto com o id txtPalavraPasse verificando se esta contém o carater inválido ; (ponto e vírgula)
f_Login.Adiciona_Validacoes(["txtPalavraPasse","«txtPalavraPasse.includes(';')»", "* A palavra-passe contém carateres inválidos!"]);
// Testa se o texto do objeto com o id chkPolitica verificando se esta ainda não foi selecionada, pois é de seleção obrigatória
f_Login.Adiciona_Validacoes(["chkPolitica","!«chkPolitica.checked»", "* É obrigatório concordar com as políticas para entrar!"]);

$(document).ready(function() {
    // Quando o formulário for submetido
    $("#frmLogin").on("submit", function(e) {
      // Caso existam erros no formulário       
      if (f_Login.Testa_Validacoes())
        // Cancela o envio do formulário
        e.preventDefault();
    });

    // Quando o botão limpar for clicado
    $("#butLimpar").on("click", function() {
      // Limpa as validações do formulário
      f_Login.Limpar_Validacoes();
      // Aciona a função reset para o formulário, limpado todos os objectos de valores
      $("#frmLogin").trigger("reset");
      // Volta a colocar o foco no objeto txtUtilizador
      $("#txtUtilizador").focus();
    });
});

Caso queira ver um exemplo funcional, descarregue e descompacte o seguinte ficheiro

exemplo_c_formulario_v1.7.zip

Descarregamento do módulo

Ficheiro do c_formulario

c_formulario.zip

Ficheiro do Bootstrap e Jquery

bootstrap e jquery.zip

Implementação

Para utilizar o módulo c_formulátio no seu projeto deve utilizar as chamadas dos ficheiros

<!--Ficheiro CSS do c_formulario-->
<link href="c_formulario/c_formulario.css" rel="stylesheet" type="text/css">
<!-- Ficheiros JS do c_formulario -->
<script src="c_formulario/b5toast.js"></script>
<script src="c_formulario/c_formulario.js"></script>

Estes são ficheiros opcionais, caso já os tenha chamado no seu projeto. Deve é ter em conta que os ficheiros JS apresentados em seguida, devem ser chamados antes dos ficheiros do JS do b5toast e Bootstrap.

<!-- Ficheiro CSS do Bootstrap 5.3.2-->
<link href="c_formulario/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Ficheiros JS do Bootstrap 5.3.2 e jQuery 3.7.1>
<script src="c_formulario/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="c_formulario/jquery-3.7.1.js"></script>

Caso queira utilizar os ficheiro do Bootstrap e Jquery sem efetuar o descarregamento dos respetivos ficheiros, substitua as linha anteriores pelas seguintes

<!-- Ficheiro CSS do Bootstrap 5.3.2-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Ficheiros JS do Bootstrap 5.3.2 e jQuery 3.7.1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Classe

O módulo c_formulario é uma classe em JavaScript de nome c_formulario, que necessita obrigatoriamente do id do formulario. Ou seja, no código html deve estar presente o atributo id na tag form. Exemplo:

<!-- Formulário no ficheiro HTML>
<form id="frmLogin">

// Associa o formulário à classe c_formulario (declaração)
f_Login = new c_formulario("frmRegisto");

Validações

As validações, através do módulo, devem ser colocadas após a associação do mesmo à classe c_formulario (ver ponto anterior). Para isso usa-se a função Adiciona_Validacoes que tem como parâmetro um vetor de 3 ou 4 elementos.


<form id="frmLogin">

  • Sempre que importar o projeto, este inicializa automaticamente e fica pronto a utilizar. Esta importação não deve ser chamada em mais lado nenhum, pois fica disponível no projetos inteiro. Caso contrário, pode gerar erros. Aconselhamos que seja chamado na página onde o projeto Flask é iniciado. 
    import mms_e3s
    import mms_e3s as mm
    # importação do projeto e inicialização do projeto
    from mms_e3s import mms_e3s
              
    # utilização do projeto através de um apelido/alias mm
    from mms_e3s import mms_e3s as mm
  • Importar apenas as funcionalidades que necessita 
    from mms_e3s import mms_e3s
    from mms_e3s import mms_e3s as m

Atributos

O módulo permite o uso de várias