formulário com campos obrigatórios

[Alexadre Di Salvo]

Olá galera,

Estou fazendo um formulário com o intuito de ser um ''PEDIDO DE MÚSICAS'', será um form em que os ouvintes pedem suas musicas pelo site.

O form terá basicamente:

-Nome

-Cidade

-Estado

-Música e Cantor (ou banda)

-Botão limpar e enviar

A parte do formulário é tranquilo, faço rapidão, mas o que quero nesse form é fazer com que Nome e música sejam campos obrigatórios e caso as pessoas não preencham esse campo exibir uma janela de alerta dizendo que o preenchimento desse campo é obrigatório.

E quando todos os campos forem preenchidos perfeitamente e ao clicar em enviar exibir um janela dizendo: ENVIADO COM SUCESSO.

Vale frisar que o site está todo em html, css e asp.

Manjo de JAVA mas não de JS, aliás nunca tentei fazer nada em JS e queria uma ajuda de vocês.

[fiote]

Existem váááárias formas de se fazer validação de campo...

Você pode usar a que está disponível aqui mesmo no fórum, no repositório de scripts (scripts prontos) clicando aqui e procurando por "obrigatório" ou "validação" no ctrl+F (não te passo o link direto pra você ver que tem troceeeeentos scripts lá, que podem te ajudar na próxima ^^).

O modo que tá lá usa uma alteração no nome dos campos pra verificar quem é ou não é obrigatório. Isso pode gerar um trabalho a mais na hora de interpretar os campos na hora das querys (ok ok, um replace no nome e tá resolvido, mas whatever)...

Aqui em baixo um que fiz agorinha, que usa a classe do campo pra ver se ele é obrigatório ou não. Também pode te atrapalhar se você usa as classes pra aplicar estilo, mas é pra mostrar outra forma de se fazer.

<script>

function confereCampos(form) {    
    var campos = form.getElementsByTagName('input');
    var podeEnviar = true;
    for (i = 0; i < campos.length; i++) {
        var classe = campos[i].className;
        var valor = campos[i].value;
        if (classe == 'obrigatorio' && valor == '') podeEnviar = false;
    }
    if (podeEnviar == true) {
        return true;
    } else {
        alert('existem campos obrigatórios em branco!')
        return false;
    }
}
</script>

<form id='minhaForm' action='?TESTE' method='post' onSubmit='return confereCampos(this)'>

nome: <input type='text' id='nome' name='nome' value=''><br>
sobrenome: <input type='text' id='sobrenome' name='sobrenome' value='' class='obrigatorio'> obrigatório*<br>
<br>

<input type='submit' value='enviar' name='enviar'>

</form>

Detalhe: tanto no meu quanto no que tá no repositório, ninguém tá usando TRIM pra evitar que o cara digite umonte de espaços pra tentar burlar a obrigatoriedade dos campos... recomendo que você faça isso (trim = tirar os espaços do começo e final da string).

Detalhe2: O script pronto dá um alert pra cada campo vazio. O meu dá apenas um no final (mas o dele mostra quais são os campos).

A lógica é bem simples. Você pode trabalhar nos dois scripts pra criar um terceiro mais completo, de acordo com as suas necessidades.

;)

Editado Junho 10, 2009 por fiote

[Alexadre Di Salvo]

Seguindo essa lógica, e pra eu implementar um aviso caso tudo seja preenchido de forma correta, abrir uma janela, um alerta dizendo: "Pedido enviado com êxito!" ??

[fiote]

if (podeEnviar == true) { // caso tudo esteja correto
        // insira aqui tudo o que você quer que seja feio ANTES do formulário ser enviado
        return true; 
}

Porém, vale lembrar que ao clicar no botão de enviar, o usuário será levado a uma nova página (a não ser que você esteja usando ajax, o que parece não ser o caso).

Seria melhor que o alert('Tudo certo!') ficasse na página-destino, e fosse enviado somente depois de inserir os dados no banco (ou sei lá o que você vai fazer com os dados heheh). Assim temos certeza certeeeeeza que realmente o pedido "foi enviado com êxito!".

[Alexadre Di Salvo]

A uma nova página? A minha idéia inicial era que tudo fosse feito na página que esse form se situa e não ser levado a uma outra. Compreende?

Por exemplo, esse dados recuperados do formulário serão jogados a um email pré-definido via um engine ASP e no email aparecerá as informações certinhas. Ela vai para um email e não para o banco de dados.

[fiote]

Você quer enviar o email a partir dos dados do formulário... SEM dar refresh na página / ir pra outra página?

Só com ajax... procura no fórum ae que vai achar.

[Alexadre Di Salvo]

Isso, caso haja algum dado incorreto ele volte ao form. Mas a principio não queria que ele desse um refresh, que desse somente o aviso e o usuário digitasse aquilo q faltasse. Sem dá refresh, até porque se der um refresh os dados são perdidos, ou não?

[fiote]

Quando tiver errado o site não faz fazer nada (alem de alertar o erro). Não vai ter refresh nem nada do tipo.

Porém, quando esitver correto, a form será enviada... e logicamente isso envolve outra página.

[Alexadre Di Salvo]

Sim sim claro.

Mas eu posso exibir o alerta "Pedido enviado com sucesso" por exemplo, e chamar novamente a minha página inicial(é ela que contem esse form) ?

[fiote]

Sim ué, é só pegar no código que eu passei por ultimo, aonde tá escrito "insira aqui tudo o que deve ser executado" etc etc.

[Alexadre Di Salvo]

Perfeito. :) Alguma duvida quanto a isso volto a postar.

Dúvida, quando abre a janela de alerta o título dela é [Programa em JavaScript], quero mudar isso para Erro! por exemplo.

tem como?

Editado Junho 11, 2009 por Alexadre Di Salvo

[Anderson F R]

você vai ter que fazer toda esta verificação na linguagem de servidor também, já que é muito fácil burlar uma verificação javascript.