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

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>

A validação funcionou de certa forma, quando a pessoa deixa de digitar algum dos campos  do formulário ele envia uma mensagem de erro...
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...

No exemplo que postou aqui está assim

Código:


<input type="submit" value="Enviar">


Mas no código fonte de seu forum está

Código:


<input type="submit" onclick="return valida(this);">


A Pergunta é você que deixou daquela maneira?
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">


e usei esse javascript

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
        }
   
}


funcionou bem.

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;
   }
}

E obtive o resultado esperado. Obrigado pela sua atenção!

Tranquilo,
o sistema anterior que você estava desenvolvendo é mais rápido e mais interessante.

Na minha humilde opinião.

até mais.

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.

Código:

<input type="email" id="email" name="email" required />

Agora vamos supor que deseja ter dois campos email e que os dois sejam iguais. Adicionamos outro:

Código:

<input type="email" id="email_addr2" name="email_addr2" oninput="check(this)">

E o script será semelhante ao do @joelson0007:

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>

@Legolas, a forumeiros não trabalha com html5, veja o cabeçalho

Código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">


Então seu esquema não vai funcionar, mas se testou e funciona na forumeiros, eu estou errado, e esqueça o que eu disse.

Acho que estou errado, como é um atributo, se o navegador entender está valendo

@legolas seu método e o melhor mesmo.

@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!

Poh show essa técnica ai, vou testar ela mais tarde
Obrigado

Vou analisar essas informações sobre o HTML5...

JS