Validação de campos de um formulário
4 participantes
Página 1 de 1
Validação de campos de um formulário
Olá amigos, caso este tópico esteja na área errada, favor mover...
Eu estou desenvolvendo um formulário de postagens simplesmente para aprender mais, ja que não entendo quase nada disso xD
Estou tentando colocar validação em determinados campos, segui um tutorial e consegui fazer o seguinte formulário
Gostaria que a validação funcionasse em todos os campos, mas coloquei no primeiro campo para fazer um teste. Porém quando eu clico em Enviar, deveria dar o aviso e não enviar os dados do formulário, só que isso não está ocorrendo, ele da o aviso mas mesmo assim envia os dados. Será que poderiam me ajudar com isso?
Aqui o formulário: link
Obs: O formulário não esta completo e tal, estou desenvolvendo ainda...
Eu estou desenvolvendo um formulário de postagens simplesmente para aprender mais, ja que não entendo quase nada disso xD
Estou tentando colocar validação em determinados campos, segui um tutorial e consegui fazer o seguinte formulário
- Código:
<form action="/post" method="post" id="form-submit" onsubmit="return valida(this);">
<div id="formulario">
<div id="formulario-title">mta[Z] | Formulário de postagem de Downloads</div>
<div id="formulario-content">
<div id="descricao"><b>Tipo de download</b></div>
<input name="download" class="text" type="text" placeholder="Digite aqui" style="text-transform: capitalize;">
<br><br>
<div id="descricao"><b>Imagem/Vídeo</b></div>
<input name="imagem" class="text" type="text" placeholder="URL da imagem/vídeo">
<br><br>
<div id="descricao"><b>Créditos</b></div>
<input name="creditos" class="text" type="text" placeholder="Coloque os créditos ORIGINAIS deste download">
<br>
<font size="1px" color="#c4c4c4" style="cursor: default;" id="tag"><b>Tags:</b> [img][/img] , [youtube][/youtube]</font>
<br><br>
<div id="descricao"><b>Descrição</b></div>
<textarea name="descricao" placeholder="Digite aqui sua descrição"></textarea>
<br><br>
<input type="submit" value="Enviar">
</div>
</div>
</form>
<style type="text/css">
textarea{
height: 200px;
resize: vertical;
}
.text, textarea{
width: 400px;
padding: 8px;
border: 1px solid #d4d4d4;
background: #fcfcfc;
color: #9f9f9f;
text-shadow: #fff 0px 1px 0px;
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0px 1px 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0px 1px 3px;
box-shadow: inset rgba(0,0,0,0.1) 0px 1px 3px;
overflow: hidden;
vertical-align: middle;
}
input:focus {
outline: none;
}
#descricao{
cursor: default;
color: #6a6f74;
font: normal 12px "Trebuchet MS",tahoma,helvetica,arial,sans-serif;
line-height: 1.6;
}
#formulario-title{
background: #1c1c1c;
font-size: 11px;
text-shadow: rgba(0,0,0,0.8) 0px 1px 1px;
-webkit-box-shadow: rgba(255,255,255,0.05) 0px 1px 0px;
-moz-box-shadow: rgba(255,255,255,0.05) 0px 1px 0px;
box-shadow: rgba(255,255,255,0.05) 0px 1px 0px;
border-bottom: 1px solid #0d0d0d;
overflow: hidden;
line-height: 37px;
clear: both;
color: #999;
font-weight: bold;
padding: 2px 20px;
box-shadow: #555 0 0 5px;
cursor: default;
border-radius: 2px 2px 0 0;
}
#formulario-content{
background: #fff;
box-shadow: #555 0 0 5px;
border-radius: 0 0 3px 3px;
color: rgb(106, 111, 116);
display: block;
line-height: 13px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.more-img{
display: none;
}
#fa_ticker_block, #chatboxx{
display: none!important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function valida(form) {
if (form.download.value=="") {
alert("Preencha o campo 'Tipo de download' corretamente");
form.nome.focus();
return false;
}
}
</script>
Gostaria que a validação funcionasse em todos os campos, mas coloquei no primeiro campo para fazer um teste. Porém quando eu clico em Enviar, deveria dar o aviso e não enviar os dados do formulário, só que isso não está ocorrendo, ele da o aviso mas mesmo assim envia os dados. Será que poderiam me ajudar com isso?
Aqui o formulário: link
Obs: O formulário não esta completo e tal, estou desenvolvendo ainda...
Re: Validação de campos de um formulário
No exemplo que postou aqui está assim
Ou será que é algum javascript que está adicionando o evento onclick?
Eu deixei assim manualmente no seu forum
- Código:
<input type="submit" value="Enviar">
- Código:
<input type="submit" onclick="return valida(this);">
Ou será que é algum javascript que está adicionando o evento onclick?
Eu deixei assim manualmente no seu forum
- Código:
<input type="submit" value="Enviar">
- Código:
function valida(form) {
if (form.download.value=="") {
console.log("Preencha o campo 'Tipo de download' corretamente");
form.download.focus();
return false;
}else{
return true
}
}
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Validação de campos de um formulário
Olá amigo, desculpe a demora para responder aqui. Nesse meio tempo acabei encontrando a solução, utilizei este Javascript
- Código:
function validacao() {
//Download
if(document.form.subject.value==""){
alert("O campo 'Tipo de download' deve ser preenchido corretamente!");
document.form.subject.focus();
return false;
}
if(document.form.download.value.length < 5 ){
alert("O campo 'Tipo de download' deve ter ao minimo 5 caracteres");
document.form.download.focus();
return false;
}
//Imagem/Vídeo
if(document.form.imagem.value==""){
alert("O campo 'Imagem/Vídeo' deve ser preenchido corretamente!");
document.form.imagem.focus();
return false;
}
//Créditos
if(document.form.creditos.value==""){
alert("O campo 'Créditos' deve ser preenchido corretamente!");
document.form.creditos.focus();
return false;
}
//Descrição
if(document.form.descricao.value==""){
alert("O campo 'Descrição' deve ser preenchido corretamente!");
document.form.descricao.focus();
return false;
}
}
Re: Validação de campos de um formulário
Tranquilo,
o sistema anterior que você estava desenvolvendo é mais rápido e mais interessante.
Na minha humilde opinião.
até mais.
o sistema anterior que você estava desenvolvendo é mais rápido e mais interessante.
Na minha humilde opinião.
até mais.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Validação de campos de um formulário
Olá, embora esteja resolvido. Há uma maneira bem mais simples com o uso do html5.
Vou dar uns exemplos.
Para um campo ser obrigatório, basta adicionar required no fim dele.
Vou dar uns exemplos.
Para um campo ser obrigatório, basta adicionar required no fim dele.
- Código:
<input type="email" id="email" name="email" required />
- Código:
<input type="email" id="email_addr2" name="email_addr2" oninput="check(this)">
- Código:
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('Os dois emails não conferem.');
} else {
input.setCustomValidity('');
}
}
</script>
Re: Validação de campos de um formulário
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Acho que estou errado, como é um atributo, se o navegador entender está valendo
@legolas seu método e o melhor mesmo.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Validação de campos de um formulário
@joelson0007 -> Sim, é indiferente à plataforma Forumeiros, pois estamos tratando de uma página html separada/personalizada e nela podemos setar o que quisermos.
É claro que essa é apenas uma alternativa. Vai depender de como o @Wagner' vai querer usar.
Abraços amigos!
É claro que essa é apenas uma alternativa. Vai depender de como o @Wagner' vai querer usar.
Abraços amigos!
Re: Validação de campos de um formulário
Poh show essa técnica ai, vou testar ela mais tarde
Obrigado
Obrigado
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|