-1

Estou tentando validar um formulário, que ele de submit no form apenas se o campo senha estiver preenchido com no mínimo 1 LETRA MAIUSCULA, 1 NUMERO, 1 LETRA MINUSCULA. Fiz isso com o regex pattern mas, se clicar em seguida novamente no botão de submit ele envia o formulário. Queria que o formulario enviasse apenas se a senha estiver digitado dessa forma, e caso não esteja retornar a mensagem de erro não como um alert, mas dentro de uma div.

<input autocomplete="off" type="password"  class="form-control" pattern="(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=^.{8,50}$).*$" onchange="if(!this.validity.valid)alert('Senha Inválida!')" id="password" name="password" placeholder="Digite sua senha" required/>

<button type="submit" name="botaologin" id="botaologin">Entrar</button>
1
  • Coloca seu o código do seu formulário inteiro aqui... vai facilitar para o pessoal poder te ajudar.
    – viana
    Commented 29/09/2020 às 14:57

1 Resposta 1

0

Existem algumas formas de fazer isso.

Eu costumo fazer utilizando o javascript tanto para a validação, quanto para o envio do form(utilizando Ajax). Assim eu tenho controle absoluto de qual momento posso enviar o formulário e também de qual retorno vou obter após o envio e tratativa do servidor.

Uma outra vantagem é que não é necessário carregar a página e isso melhora a experiência do usuário.

Lembrando que também é importante que essa validação de senha seja feita no servidor.

Segue um exemplo da forma em que geralmente faço o submit do formulário:

HTML:

<form id="meuForm" action="">

  <label>Senha: </label>
  <input id="senha" type="text" name="senha"/>

  <button type="submit" id="botaoSubmit"></button>
  
  
</form>

No Javascript você pode utilizar o Ajax da forma que preferir, eu faço com Fetch API:

JavaScript

document.querySelector('#meuForm').addEventListener('submit', function(e){
    
  // Isso impede que o form seja enviado ao clicar no botão de envio do formulário
  e.preventDefault();
    
  // Aqui você pode recuperar a senha e verificar se a mesma está no formato desejado
  let senha = document.querySelector('#senha').value;
  let senhaValida = VerificaSenha(senha);
    
  if(senhaValida == true){
    EnviaForm(senha); 
    
  } else {
    // Aqui vai o trecho de código para exibir a mensagem de erro em uma DIV
  }    
  
});


function EnviaForm(senha){

fetch(`suaUrl`, optionsPost = { method: "POST", mode: "cors", body: senha })
        .then(response => {
            response.json()
                .then(data => {                    
                    // Deu certo o envio
                    console.log(data);

                })
                .catch();
        })
        .catch(error => {
            // Se o server apresentar erro em qualquer ação cairá aqui
            console.log("Erro: " + error);
        });
}

Dessa forma, toda a validação é controlada pelo javascript antes do envio do formulário ao servidor.

2
  • Não funcionou não, ta dando erro.
    – Phpcoder
    Commented 29/09/2020 às 19:14
  • Qual erro? Seja mais específico e se possível mostre com imagens e exemplos para que eu possa te auxiliar.
    – Jaderson
    Commented 29/09/2020 às 19:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .