Javascript no Colorbox

[Artes Ussler 1]

Olá a todos!

Antes, informo que pesquisei, inclusive aqui no fórum antes de postar. Talvez tenha algo que me passou despercebido, mas é o seguinte:

Tenho este simples código de verificação de campo preenchido ou não:

<script type="text/javascript">
function validaForm(){
if(!document.formulario.nome.value){
nomeBranco.style.display="block";
return false;
}
</script>

Precisaria implantar ele no Colorbox. Tenho um formulário que é aberto através dele, e o envio das informações (Através do PhpMailer) funciona normalmente, mas antes do envio gostaria da verificação de preenchimento dos campos.

Os trechos que estou usando é este:

<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"80%",});
});
</script>

e este:

<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>

<?php
if(isset($_POST['enviar'])) {
...
//COMANDOS DO PHPMAILER
...
?>

<form action="#" name="form_suporte" method="post" enctype="multipart/form-data" onsubmit="return validarForm()">
<input type="text" id="nomeCompleto" name="nomeCompleto" placeholder="Nome completo" onfocus="nomeBranco.style.display='none';" />

<div id="nomeBranco" class="alerta"><p>Preencha este campo!</p></div>

<input type="submit" name="enviar" value="Enviar">
</form>
</div>
</div>

Espero que as informações sejam suficientes.

Se alguém conhecer algum tutorial online que mostra como fazer isso, fico grato.

[AndersonMamede 88]

Se você criou a função validarForm, é para funcionar.

O que acontece quando você clica no botão enviar?

Aparece alguma mensagem de erro? Abra o console do Chrome (F12) e vai na aba Console e então testa o formulário para ver se aparece algum erro...

[Ted k' 126]

troque isso:

if(!document.formulario.nome.value){
nomeBranco.style.display="block";
return false;
}

por isso:

if(document.formulario.nome.value == ""){
nomeBranco.style.display="block";
return false;
}
else {
document.formulario.submit();
}

[Artes Ussler 1]

Então...

Abri o console do Chrome e descobri o problema:

O nome do formulário e do campo estavam diferentes :)

Mas agora surgiu um outro detalhe: quando clico no Enviar, ele fecha a janela do Colorbox. Será que existe a possibilidade dela permanecer aberta e aparecer algo do tipo "Mensagem enviada!" ?

[gabrieldarezzo 255]

Ele fecha ou da um reload/move para outra pagina?

De qlq forma se vai precisar usar um AJAX:

http://stackoverflow.com/questions/23507608/form-submission-without-page-refresh

Caso não conheça ajax, recomendo:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

[Artes Ussler 1]

Olá

Fiz vários testes com Ajax, mas como não estou familiarizado com ele, foram sem sucesso.

Resolvi usar iframe ao invés de inline no Colorbox:

<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".iframe").colorbox({iframe:true, width:"50%", height:"60%"});
});
</script>

E funcionou como eu queria.

A questão é: seria melhor ter usado inline ao invés de iframe?