Teste e Envio de formulario

[Charlie04 0]

Tenho um formulário

 

           <form role="form" name="senha" class="ls-login-form" action="#">

            <fieldset>

 

              <label class="ls-label col-md-16">

                <b class="ls-label-text">CPF:</b>

                <input type="text" name="cpf" id="cpf" class="ls-mask-cpf" placeholder="000.000.000-00" required>

                <span id="errocpf" class="ls-sm-space"></span>

              </label>

 

              <label class="ls-label col-md-16">

                <b class="ls-label-text">E-mail:</b>

                <input type="text" name="email" placeholder="Digite seu email" maxlength="60" size="65" required>

 

              </label>

 

              <br>

 

              <input onclick="validacaoEmail(senha.email,senha.cpf)" id="botao" type="button" value="Redefinir"

                class="ls-btn-primary ls-btn-block ls-btn-lg">

  

--- e o JS ----

 

function validacaoEmail(field, field2) {

    usuario = field.value.substring(0, field.value.indexOf("@"));

    dominio = field.value.substring(field.value.indexOf("@") + 1, field.value.length);

    var cpf = field2.value;

 

    if ((usuario.length >= 1) &&

      (dominio.length >= 3) &&

      (usuario.search("@") == -1) &&

      (dominio.search("@") == -1) &&

      (usuario.search(" ") == -1) &&

      (dominio.search(" ") == -1) &&

      (dominio.search(".") != -1) &&

      (dominio.indexOf(".") >= 1) &&

      (dominio.lastIndexOf(".") < dominio.length - 1)) {

 

      if (cpf.length < 11) {

        document.getElementById("alerta-email").innerHTML = "<strong>Vish!</strong> CPF inválido.";

       

      }

    } else {

      if (cpf.length < 11) {

        document.getElementById("alerta-email").innerHTML = "<strong>Vish!</strong> E-mail e CPF inválidos";

       

      } else {

        document.getElementById("alerta-email").innerHTML = "<strong>Vish!</strong> E-mail inválido. Os endereços de e-mail devem seguir o padrão xx@xx.xx. ";

       

      }

    }

  }

 

  $(document).ready(function () {

      var $seuCampoCpf = $("#cpf");

      $seuCampoCpf.mask('000.000.000-00', {reverse: true});

  });

 

Quero testar com onclick e depois enviar para o PHP adicionar no banco.
Mas ele não chama a pagina.

 

Com TYPE = Button ele funciona o testa da máscara e não redireciona.

Com type = submit ele não funciona a mascara e redireciona.

Provavelmente é algo bem simples , mas estou com uma bela duvida de como resolver.

 

att

 

[gabrielms 0]

@Charlie04 O problema é bem simples. Quando você utiliza um input ou um button com o type submit o formulário faz uma Request para o link contido no atributo action antes dele chamar a função, ele carrega outra página e assim ele perde a chamada da função.

 

Com o type button ele não faz essa Request do formulário, assim ele não envia o formulário e executa a função.

 

Para esse caso você poderia trabalhar no evento submit do formulário e não no evento click do input.

 

Coloque o type do input para submit e remova o evento onclick dele.

 <input id="botao" type="submit" value="Redefinir" class="ls-btn-primary ls-btn-block ls-btn-lg">

 

Depois você adiciona uma chamada de função no evento submit no formulário.

 

 <form onsubmit="validacaoEmail(senha.email, senha.cpf)" role="form" name="senha" class="ls-login-form" action="/">

e na sua função de validação adicione um retorno.

 

return true;

Retorne true(Verdadeiro) caso os dados passem com sucesso pela validação ou retorne false(falso) caso não.

return false;

 

Obs..:

 

Lembrando que nenhuma validação no Front-End garante uma integridade de dados e nunca deve ser usada como garantia.

 

Com o HTML 5 você pode usar o input type="email" para especificar o tipo de valor que você quer recebe nesse input e junto dele o atributo required, assim bloqueando o formulário de fazer a Request até que o usuário cumpra com as requisições do input type.