Jump to content
Sign in to follow this  
NadoLoko

Problemas na validação de formulário

Recommended Posts

Galera preciso de ajuda!

Tenho uma pagina de cadastro com um cabeçalho, logo abaixo tenho três <div> de iguais tamanhos, sendo que a primeira fica visível com algumas informações. Quando o usuário clicar no botão próximo, esta primeira div fica "invisivel" ( altero via javascrip a ID no css display:none). Nesta segunda <div>, agora visivel, tem o formulario com um botão para que o usuário va para a terceira div.

O problema é o seguinte: ao clicar no botao da segunda div, chamo uma função para validar os campos do formulario, se estiver todos os campos preenchidos corretamente, segue para a div três, caso contrario permanece na div dois. Entretanto, se os dados estiverem preenchidos errados, ao invés de permanecer na div, ele volta para a div inicial (a primeira). O que falta implementar na minha função.

 

function ValidaFormulario(){

var tamanho_nome = document.forms["dadosIniciais"].nome.value.length;

 

if ((tamanho_nome < 5 ) || (tamanho_nome > 100)){

 

 

 

}

 

}

Share this post


Link to post
Share on other sites

Se estiver dando submit, vai carregar a página de novo e volta pro passo 1 mesmo!
Usa a função onclick no botao e dentro do seu if joga um código desse tipo:

 

alert("Campo nome inválido!");
return false;

 

Ai ele não da o refresh na página e da um alert pro usuário!

  • +1 1

Share this post


Link to post
Share on other sites

Valeu Fabricio, fiz algo parecido com sua dica, depois de um momento de lucidez que tive. Eu cancelei o evento click do submit e chamei a função de validação. Conforme a resposta ou ele limpava os campos dando focus no campo do nome ou ele fazia a função de troca de divs. Valeu pela dica.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Aureo Almeida
      Possuo um formulário que está repassando parte dos dados que desejo enviar. Ele busca o resultado de três consultas e duas delas dão opções de seleção para  o usuário em input radio.
      A primeira busca informações de produtos selecionados a partir de um parâmetro recebido via post. Este mesmo parâmetro também estabelece um critério para as outras duas consultas.
      Todas elas funcionam adequadamente, sem problemas. A questão é que ao enviar o formulário somente os dois parâmetros que estão presentes em inputs hidden são enviados. Os dois inputs radio, que são preenchidos de acordo com determinados critérios, não.
      Este é o código do formulario:
      <form action="carrinho.php" method="post"> <?php //Recebe a variavel idproduto da página do produto $sub_id = $_POST['idproduto']; $sql = "SELECT * FROM psd_produtos Where prd_id = '$sub_id'"; $stmt = $conn->prepare($sql); $stmt->execute(); $dados= $stmt->fetchAll(PDO::FETCH_OBJ); foreach ($dados as $detProdutos): $prdid = $detProdutos->prd_id; $nome= $detProdutos->prd_nome; $valor = $detProdutos->prd_valor; $novovalor = number_format($valor, 2, ',', '.'); $quantidade = $detProdutos->prd_estoque; echo" <h2>PREÇO: R$ $novovalor</h2><br/> <input type='hidden' name='id' value='$prdid'> <input type='hidden' name='acao' value='add'> "; endforeach; $sql1 = "SELECT * FROM psd_cores WHERE prd_id = '$sub_id'AND crs_quantidade != '0'"; $stmt1 = $conn->prepare($sql1); $stmt1->execute(); $dados1= $stmt1->fetchAll(PDO::FETCH_OBJ); foreach ($dados1 as $prodCores): if($quantidade!= 0){ echo" <input type='radio' name='cor' id='cor' value='$prodCores->crs_cores' checked='checked'> $prodCores->crs_cores <br> ";} endforeach; $sql2 = "SELECT * FROM psd_sabores WHERE prd_id = '$sub_id'AND sbr_quantidade != '0'"; $stmt2 = $conn->prepare($sql2); $stmt2->execute(); $dados2= $stmt2->fetchAll(PDO::FETCH_OBJ); foreach ($dados2 as $prodSabores): if($quantidade!= 0){ echo" <input type='radio' name='sabor' id='sabor 'value='$prodSabores->sbr_sabor' checked='checked'> $prodSabores->sbr_sabor <br> ";} endforeach; ?> <input type='submit' class='imput-comprar' value='Comprar'> </form> O estranho é que se eu fizer um formulário com uma das  consultas isoladamente da demais, os parâmetros são enviados. Exemplo que funciona:
      <form action="carrinho.php" method="post"> $sql2 = "SELECT * FROM psd_sabores WHERE prd_id = '$sub_id'AND sbr_quantidade != '0'"; $stmt2 = $conn->prepare($sql2); $stmt2->execute(); $dados2= $stmt2->fetchAll(PDO::FETCH_OBJ); foreach ($dados2 as $prodSabores): if($quantidade!= 0){ echo" <input type='radio' name='sabor' id='sabor 'value='$prodSabores->sbr_sabor' checked='checked'> $prodSabores->sbr_sabor <br> ";} endforeach;?> <br><input type='submit' class='imput-comprar' value='Comprar'> </form> O que pode estar impedindo que os valores das duas consultas após a primeira não sejam enviadas em conjunto, somente isoladamente?
    • By geivisonsales
      tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?
    • By andre2654
      Boa tarde, eu preciso de ajuda de vocês, estou com um problema que é o seguinte, eu preciso que quando a pessoa clicar na lixeira, exclua essa linha do banco de dados, mas como posso fazer? perdoem a minha inexperiência, mas já busquei bastante a respeito e nada.
    • By kriskastro
      Oi, pessoal. Preciso de uma ajuda de vocês. 
      Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso?
       
      A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi.
      <form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse"> <fieldset> <p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label> <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p> <p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label> <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p> <p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label> <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p> <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label> <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p> <p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p> <center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp; <center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center> <p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" /> <input id="clica-botao-house" class="button" type="button" value="Enviar" /></p> </fieldset> </form> <script language="javascript"> function chama(){ var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value); if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){ jQuery('#msgErroHouse').hide(); jQuery('#msgShowHouse').show(); document.formhouse.nome.value = ''; document.formhouse.email.value = ''; document.formhouse.ddd.value = ''; document.formhouse.telefone.value = ''; document.formhouse.mensagem.value = ''; }else{ jQuery('#msgShowHouse').hide(); jQuery('#msgErroHouse').show(); } } setTimeout(function(){ jQuery('#clica-botao-house').on('click', function(){chama ()}); jQuery('[data-avia-form-id]').hide(); },100) </script>  
    • By s3c0
      Olá pessoal,
       
      boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?
       
      <div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.