[Resolvido] Problema! Formulário PHP não funciona

RobertoC · Setembro 24, 2009

Bom dia, gente boa. Como vão?

Estou fazendo um site para um hotel, e a sessão de reservas é em PHP.

Peguei um script de calendário pronto e tal, e está funcionando a seleção.

Acredito que meu erro seja na função lógica do final dele, onde eu quero exigir que TODOS os campos sejam preenchidos, porém o dos quartos de hotel APENAS UM seja obrigatório.

Segue o código fonte:

Calendário (vai na head do site)

<script type="text/javascript">
// <!-- <![CDATA[

// Project: Dynamic Date Selector (DtTvB) - 2006-03-16
// Script featured on JavaScript Kit- http://www.javascriptkit.com
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Get Element By Id
function ds_getel(id) {
	return document.getElementById(id);
}

// Get the left and the top of the element.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Output Buffering
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Text Element...

var ds_monthnames = [
'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
]; // You can translate it for your language.

var ds_daynames = [
'Dom', 'Seg', 'Ter', 'Qua', 'Qui', '---', 'Sáb'
]; // You can translate it for your language.

// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3"> Fechar </td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Define width the day row.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// This one draws calendar...
function ds_draw_calendar(m, y) {
	// First clean the output buffer.
	ds_ob_clean();
	// Here we go, do the header
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Make a date object.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 1;
	// Start the first week
	ds_echo (ds_template_new_week());
	// If sunday is not the first day of the month, make a blank cell...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Today is sunday, make a new week.
		// If this sunday is the first day of the month,
		// we've made a new row for you already.
		if (j == 0 && !first_loop) {
			// New week!!
			ds_echo (ds_template_new_week());
		}
		// Make a row of that day!
		ds_echo (ds_template_day(i + 1, m, y));
		// This is not first loop anymore...
		first_loop = 0;
		// What is the next day?
		j ++;
		j %= 7;
	}
	// Do the footer
	ds_echo (ds_template_main_below());
	// And let's display..
	ds_ob_flush();
	// Scroll it into view.
	ds_ce.scrollIntoView();
}

// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
	// Set the element to set...
	ds_element = t;
	// Make a new date, and set the current month and year.
	var ds_sh_date = new Date();
	ds_c_month = ds_sh_date.getMonth() + 1;
	ds_c_year = ds_sh_date.getFullYear();
	// Draw the calendar
	ds_draw_calendar(ds_c_month, ds_c_year);
	// To change the position properly, we must show it first.
	ds_ce.style.display = '';
	// Move the calendar container!
	the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
	ds_ce.style.left = the_left + 'px';
	ds_ce.style.top = the_top + 'px';
	// Scroll it into view.
	ds_ce.scrollIntoView();
}

// Hide the calendar.
function ds_hi() {
	ds_ce.style.display = 'none';
}

// Moves to the next month...
function ds_nm() {
	// Increase the current month.
	ds_c_month ++;
	// We have passed December, let's go to the next year.
	// Increase the current year, and set the current month to January.
	if (ds_c_month > 12) {
		ds_c_month = 1; 
		ds_c_year++;
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous month...
function ds_pm() {
	ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
	// We have passed January, let's go back to the previous year.
	// Decrease the current year, and set the current month to December.
	if (ds_c_month < 1) {
		ds_c_month = 12; 
		ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the next year...
function ds_ny() {
	// Increase the current year.
	ds_c_year++;
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous year...
function ds_py() {
	// Decrease the current year.
	ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Format the date to output.
function ds_format_date(d, m, y) {
	// 2 digits month.
	m2 = '00' + m;
	m2 = m2.substr(m2.length - 2);
	// 2 digits day.
	d2 = '00' + d;
	d2 = d2.substr(d2.length - 2);
	// YYYY-MM-DD
	return y + '-' + m2 + '-' + d2;
}

// When the user clicks the day.
function ds_onclick(d, m, y) {
	// Hide the calendar.
	ds_hi();
	// Set the value of it, if we can.
	if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);
	// Maybe we want to set the HTML in it.
	} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
	// I don't know how should we display it, just alert it to user.
	} else {
		alert (ds_format_date(d, m, y));
	}
}

// And here is the end.

// ]]> -->
</script>

PHP de envio

<?php
                        if(!$_POST){
						?>
                        <form action="" method="post">
                          <table width="500" border="0" cellspacing="0" cellpadding="0" class="titulos">
                            <tr>
                              <td colspan="2">Nome
                              <label>
                                <input type="text" name="nome" id="nome">
                              </label></td>
                            </tr>
                            <tr>
                              <td colspan="2">Endereço 
                                <label>
                                  <input type="text" name="endereco" id="endereco">
                              </label></td>
                            </tr>
                            <tr>
                              <td width="253">Bairro 
                                <label>
                                  <input type="text" name="bairro" id="bairro">
                              </label></td>
                              <td width="247">Cidade 
                                <label>
                                  <input type="text" name="cidade" id="cidade">
                              </label></td>
                            </tr>
                            <tr>
                              <td>CEP 
                                <label>
                                  <input type="text" name="cep" id="cep">
                              </label></td>
                              <td>Estado 
                                <select name="estado" class="formitens" id="estado">
                                  <option>Escolha o seu Estado</option>
                                  <option value="Acre">Acre</option>
                                  <option value="Alagoas">Alagoas</option>
                                  <option value="Amazonas">Amazonas</option>
                                  <option value="Bahia">Bahia</option>
                                  <option value="Ceará">Ceará</option>
                                  <option value="Distrito Federal">Distrito Federal</option>
                                  <option value="Espírito Santo">Espírito Santo</option>
                                  <option value="Goiás">Goiás</option>
                                  <option value="Maranhão">Maranhão</option>
                                  <option value="Minas Gerais">Minas Gerais</option>
                                  <option value="Mato Grosso">Mato Grosso</option>
                                  <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
                                  <option value="Pará">Pará</option>
                                  <option value="Paraíba">Paraíba</option>
                                  <option value="Pernambuco">Pernambuco</option>
                                  <option value="Piauí">Piauí</option>
                                  <option value="Paraná">Paraná</option>
                                  <option value="Rio de Janeiro">Rio de Janeiro</option>
                                  <option value="Rio Grande do Norte">Rio Grande do Norte</option>
                                  <option value="Rio Grande do Sul">Rio Grande do Sul</option>
                                  <option value="Rondônia">Rondônia</option>
                                  <option value="Roraima">Roraima</option>
                                  <option value="Santa Catarina">Santa Catarina</option>
                                  <option value="São Paulo">São Paulo</option>
                                  <option value="Tocantins">Tocantins</option>
                              </select></td>
                            </tr>
                            <tr>
                              <td>Telefone
                              <label>
                                <input type="text" name="telefone" id="telefone">
                              </label></td>
                              <td>E-mail
                              <label>
                                <input type="text" name="email" id="email">
                              </label></td>
                            </tr>
                            <tr>
                              <td colspan="2"><table width="498" border="0" align="center" cellpadding="0" cellspacing="0" class="titulos">
                                <tr>
                                  <td>Categoria</td>
                                  <td>Quantidade de quartos</td>
                                </tr>
                                <tr>
                                  <td>- single</td>
                                  <td><label>
                                    <select name="quarto_single" id="quarto_single">
                                      <option selected>00</option>
                                      <option>01</option>
                                      <option>02</option>
                                      <option>03</option>
                                      <option>04</option>
                                      <option>05</option>
                                      <option>06</option>
                                      <option>07</option>
                                      <option>08</option>
                                      <option>09</option>
                                      <option>10</option>
                                    </select>
                                  </label></td>
                                </tr>
                                <tr>
                                  <td>- duplo</td>
                                  <td><select name="quarto_duplo" id="quarto_duplo">
                                    <option selected>00</option>
                                    <option>01</option>
                                    <option>02</option>
                                    <option>03</option>
                                    <option>04</option>
                                    <option>05</option>
                                    <option>06</option>
                                    <option>07</option>
                                    <option>08</option>
                                    <option>09</option>
                                    <option>10</option>
                                  </select></td>
                                </tr>
                                <tr>
                                  <td>- triplo</td>
                                  <td><select name="quarto_triplo" id="quarto_triplo">
                                    <option selected>00</option>
                                    <option>01</option>
                                    <option>02</option>
                                    <option>03</option>
                                    <option>04</option>
                                    <option>05</option>
                                    <option>06</option>
                                    <option>07</option>
                                    <option>08</option>
                                    <option>09</option>
                                    <option>10</option>
                                  </select></td>
                                </tr>
                                <tr>
                                  <td>- suíte</td>
                                  <td><select name="quarto_suite" id="quarto_suite">
                                    <option selected>00</option>
                                    <option>01</option>
                                    <option>02</option>
                                    <option>03</option>
                                    <option>04</option>
                                    <option>05</option>
                                    <option>06</option>
                                    <option>07</option>
                                    <option>08</option>
                                    <option>09</option>
                                    <option>10</option>
                                  </select></td>
                                </tr>
                              </table></td>
                            </tr>
                            <tr>
                              <td>Check-in (entrada)</td>
                              <td>Check-out (saída)</td>
                            </tr>
                            <tr>
                              <td><input onClick="ds_sh(this);" name="check_in" readonly="readonly" style="cursor: text" id="check_in" /></td>
                              <td><input onClick="ds_sh(this);" name="check_out" readonly="readonly" style="cursor: text" id="check_out" /></td>
                            </tr>
                            <tr>
                              <td> </td>
                              <td> </td>
                            </tr>
                            <tr>
                              <td> </td>
                              <td> </td>
                            </tr>
                            <tr>
                              <td> </td>
                              <td> </td>
                            </tr>
                            <tr>
                              <td><label>
                                <input type="reset" name="Reset" class="formitens" value="Limpar">
                              </label></td>
                              <td><label>
                                <input name="submit" type="image" value="Submit" src="images/bt_enviar.jpg" alt="enviar formulário" width="39" height="35" />
                              </label></td>
                            </tr>
                            <tr>
                              <td> </td>
                              <td> </td>
                            </tr>
                          </table>
        </form>
      <?php 
		} else {
			$nome = $_POST['nome'];
			$endereco = $_POST['endereco'];
			$bairro = $_POST['bairro'];
			$cep = $_POST['cep'];
			$telefone = $_POST['telefone'];
			$email = $_POST['email'];
			$cidade = $_POST['cidade'];
			$estado = $_POST['estado'];
			$quarto_single = $_POST['single'];
			$quarto_duplo = $_POST['duplo'];
			$qarto_triplo = $_POST['triplo'];
			$quarto_suite = $_POST['suite'];
			$check_in = $_POST['checkin'];
			$check_out = $_POST['checkout'];

			//para o envio em formato HTML
			$headers = "MIME-Version: 1.0\r\n";
			$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
			$headers .= "From: $email\r\n";
			$headers .= "Reply-To: $destino\r\n";
						
			$msg = "Nome: ".$nome;
			$msg .= "<br />";
			$msg .= "Endereço: ".$endereco;
			$msg .= "<br />";
			$msg .= "Bairro: ".$bairro;
			$msg .= "<br />";
			$msg .= "CEP: ".$cep;
			$msg .= "<br />";
			$msg .= "Telefone: ".$telefone;
			$msg .= "<br />";
			$msg .= "E-mail: ".$email;
			$msg .= "<br />";
			$msg .= "Cidade: ".$cidade;
			$msg .= "<br />";
			$msg .= "Estado: ".$estado;
			$msg .= "<br />";
			$msg .= "Quarto Single: ".$quarto_single;
			$msg .= "<br />";
			$msg .= "Quarto Duplo: ".$quarto_duplo;
			$msg .= "<br />";
			$msg .= "Quarto Triplo: ".$quarto_triplo;
			$msg .= "<br />";
			$msg .= "Quarto Suíte: ".$quarto_suite;
			$msg .= "<br />";
			$msg .= "Check-In: ".$check_in;
			$msg .= "<br />";
			$msg .= "Check-Out: ".$check_out;



			$destino = "EMAIL@DOMINIO.com.br";
			$enviou = mail($destino,"Contato site Hotel",$msg,$headers);

			$exibir_apos_sucesso='contato_sucesso.html';
			$exibir_apos_erro='contato_erro.html';
			
			if ($nome and $endereco and $check_in and $enviou){
					echo "<script>window.location='$exibir_apos_sucesso'</script>";
				}
				else {
					echo "<script>window.location='$exibir_apos_erro'</script>";
			}
			}
			?>

Acredito que meu erro (ou um deles) seja na condição IF do final.

Não coloquei todas variáveis, mas a idéia é "se tiver nome, endereço, etc. E quarto_single OU quarto_duplo OU outro, ENVIAR e vai pra página de envio OK", só não sei como fazer ao certo. Também não sei se a coleta dos campos da data e quartos estão corretos.

Agradeço pela ajuda de antemão.

Matias Rezende · Setembro 24, 2009

Bom uso da área

Atenção:

Este subfórum é destinado apenas para postagem de artigos, tutoriais e matérias sobre PHP.

Não é permitido a abertura de tópicos com dúvidas. Para isso, use o Fórum de PHP.

Tópico Movido

Artigos Matérias e Tutorias (PHP) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif PHP

mexicanox · Setembro 29, 2009

voce pode fazer isso com javascript, porem é sempre bom voce tambem fazer a validação no servidor

if(quarto_single == "#" || quarto_duplo == "#" || ...){
    //açoes caso o formulario esteja INCORRETO    
}else{
    //açoes caso o formulario esteja CORRETO
    if(mail($destino,"Contato site Hotel",$msg,$headers)){
        //redireciona para a pagina de OK
    }
}

ai la no seu select do quarto_single quarto_duplo ...

coloca assim

<select name="quarto_single" id="quarto_single">
<option selected value="#">00</option>

acho que é isso que voce precisa

flws

RobertoC · Setembro 30, 2009

voce pode fazer isso com javascript, porem é sempre bom voce tambem fazer a validação no servidor
if(quarto_single == "#" || quarto_duplo == "#" || ...){
    //açoes caso o formulario esteja INCORRETO    
}else{
    //açoes caso o formulario esteja CORRETO
    if(mail($destino,"Contato site Hotel",$msg,$headers)){
        //redireciona para a pagina de OK
    }
}
ai la no seu select do quarto_single quarto_duplo ...

coloca assim
<select name="quarto_single" id="quarto_single">
<option selected value="#">00</option>
acho que é isso que voce precisa

flws

Como seria o código com javascript?

Vou tentar fazer depois.

Valeu, cara.

mexicanox · Outubro 5, 2009

foi mal ter demorado, é que deu uns problemas e eu fiquei sem a internet.

em javascript voce pode colocar o codigo direto na pagina ou fazer um arquivo externo

vou te dar um exemplo bem simples

<html>
<head>
<title></title>
<script type="text/javascript">
//cria a função validar
function validar(){
   //pega o valor do elemento pelo ID, no caso quarto_single
   //se esse valor for igual a # significa que o campo nao esta preenchido
   if(document.getElementById("quarto_single").value == "#"){
      //mostra um caixa de texto com a mensagem
      alert("Preencha o campo 'Quarto Single'");
      //retorna falso
      return false;
   }
}
</script>
</head>
<body>
Preencha o formulario

<form name="nomeDoForm" method="POST" action="phpDeEnvio">
Quarto Single: --- 
<select name="quarto_single" id="quarto_single">
<option selected value="#">Selecione</option>
<option>Opção 1</option>
<option>Opção 2</option>
<option>Opção 3</option>
<option>Opção 4</option>

<input type="submit" value="Enviar" onclick="return validar()">
</form>
</body>
</html>

foi um exemplo basico mas acho que apartir dai voce consegue validar o formulario inteiro se quiser.

lembrando de validar tembem no servidor, por que mesmo que voce faça a melhor programação do mundo se cara for em ferraments>opções>conteudo ele desabilita o javascript e tudo o que voce fez nao vai valer de nada.

flws

RobertoC · Outubro 5, 2009

Cara, muito obrigado pelas respostas.

Fazendo todo formulário baseado no javascript eu até saberia fazer quase todo ele, e não haveria uma função no PHP direcionando para uma página de envio correto/com problemas, certo? O usuário só poderia realizar o envio após preencher os campos, né?

E por exemplo, o usuário pode preencher só o quarto single e deixar os outros em branco, como seria a lógica na programação ali do "if"?

Matias Rezende · Outubro 5, 2009

Como você está fazendo tudo pelo Javascript, vou mover para a área correta.

Tópico Movido

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript

mexicanox · Outubro 5, 2009

não haveria uma função no PHP direcionando para uma página de envio correto/com problemas, certo?

supondo que voce va enviar os dados do form para um email voce pode fazer assim:

if(mail($destino,$assunto,$mensagem,$header)) header("location:enviado_com_sucesso");
else header("location:problema_no_envio");

se o email for enviado redireciona para uma pagina com a mensagem de sucesso

senao redireciona para a pagina de erro

O usuário só poderia realizar o envio após preencher os campos, né?

a ideia é essa mesmo, mas é o que eu te falei se o usuario desabilitar o javascript ja era.

E por exemplo, o usuário pode preencher só o quarto single e deixar os outros em branco, como seria a lógica na programação ali do "if"?

se o valor do campo1 for igual a # OU valor do campo2 igual a # OU valor do campo3 igual a # ...

retorna um erro

EX:

function validar(){
   //pega o valor do elemento pelo ID, no caso quarto_single
   //se esse valor for igual a # significa que o campo nao esta preenchido
   if(document.getElementById("quarto_single").value == "#" || document.getElementById("quarto_duplo").value == "#" || document.getElementById("quarto_triplo").value == "#"){
      //mostra um caixa de texto com a mensagem
      alert("Escolha o quarto");
      //retorna falso
      return false;
   }
}

flws

RobertoC · Outubro 14, 2009

Bom, fiz aqui com javascript a exigência de preenchimento dos campos, mas fiquei com dúvida em alguns pontos:

1- Como exigir que escolha o ESTADO, dando um alerta de erro, caso o campo selecionado seja "Selecione seu Estado"?

2- Como exigir que PELO MENOS UM DOS campos dos quartos seja preenchido com algum valor diferente de "00" (zero)?

Segue o código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

.ds_box {
	background-color: #FFF;
	border: 1px solid #000;
	position: absolute;
	z-index: 32767;
}

.ds_tbl {
	background-color: #FFF;
}

.ds_head {
	background-color: #333;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}

.ds_subhead {
	background-color: #CCC;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width: 32px;
}

.ds_cell {
	background-color: #EEE;
	color: #000;
	font-size: 13px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}

.ds_cell:hover {
	background-color: #F3F3F3;
} /* This hover code won't work for IE */

.titulos {        font-family: Verdana, Geneva, sans-serif;
        font-size:11px;
        color: #000;
        text-decoration: none;
}
</style>
</head>
<body>

<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>

<script type="text/javascript">
// <!-- <![CDATA[

// Project: Dynamic Date Selector (DtTvB) - 2006-03-16
// Script featured on JavaScript Kit- http://www.javascriptkit.com
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Get Element By Id
function ds_getel(id) {
	return document.getElementById(id);
}

// Get the left and the top of the element.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Output Buffering
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Text Element...

var ds_monthnames = [
'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
]; // You can translate it for your language.

var ds_daynames = [
'Dom', 'Seg', 'Ter', 'Qua', 'Qui', '---', 'Sáb'
]; // You can translate it for your language.

// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fechar]</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Define width the day row.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// This one draws calendar...
function ds_draw_calendar(m, y) {
	// First clean the output buffer.
	ds_ob_clean();
	// Here we go, do the header
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Make a date object.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 1;
	// Start the first week
	ds_echo (ds_template_new_week());
	// If sunday is not the first day of the month, make a blank cell...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Today is sunday, make a new week.
		// If this sunday is the first day of the month,
		// we've made a new row for you already.
		if (j == 0 && !first_loop) {
			// New week!!
			ds_echo (ds_template_new_week());
		}
		// Make a row of that day!
		ds_echo (ds_template_day(i + 1, m, y));
		// This is not first loop anymore...
		first_loop = 0;
		// What is the next day?
		j ++;
		j %= 7;
	}
	// Do the footer
	ds_echo (ds_template_main_below());
	// And let's display..
	ds_ob_flush();
	// Scroll it into view.
	ds_ce.scrollIntoView();
}

// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
	// Set the element to set...
	ds_element = t;
	// Make a new date, and set the current month and year.
	var ds_sh_date = new Date();
	ds_c_month = ds_sh_date.getMonth() + 1;
	ds_c_year = ds_sh_date.getFullYear();
	// Draw the calendar
	ds_draw_calendar(ds_c_month, ds_c_year);
	// To change the position properly, we must show it first.
	ds_ce.style.display = '';
	// Move the calendar container!
	the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
	ds_ce.style.left = the_left + 'px';
	ds_ce.style.top = the_top + 'px';
	// Scroll it into view.
	ds_ce.scrollIntoView();
}

// Hide the calendar.
function ds_hi() {
	ds_ce.style.display = 'none';
}

// Moves to the next month...
function ds_nm() {
	// Increase the current month.
	ds_c_month ++;
	// We have passed December, let's go to the next year.
	// Increase the current year, and set the current month to January.
	if (ds_c_month > 12) {
		ds_c_month = 1; 
		ds_c_year++;
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous month...
function ds_pm() {
	ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
	// We have passed January, let's go back to the previous year.
	// Decrease the current year, and set the current month to December.
	if (ds_c_month < 1) {
		ds_c_month = 12; 
		ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the next year...
function ds_ny() {
	// Increase the current year.
	ds_c_year++;
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous year...
function ds_py() {
	// Decrease the current year.
	ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Format the date to output.
function ds_format_date(d, m, y) {
	// 2 digits month.
	m2 = '00' + m;
	m2 = m2.substr(m2.length - 2);
	// 2 digits day.
	d2 = '00' + d;
	d2 = d2.substr(d2.length - 2);
	// YYYY-MM-DD
	return d2 + '/' + m2 + '/' + y;
}

// When the user clicks the day.
function ds_onclick(d, m, y) {
	// Hide the calendar.
	ds_hi();
	// Set the value of it, if we can.
	if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);
	// Maybe we want to set the HTML in it.
	} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
	// I don't know how should we display it, just alert it to user.
	} else {
		alert (ds_format_date(d, m, y));
	}
}

// And here is the end.

// ]]> -->
</script>


<script type="text/javascript">
/**
* Arquivo de funções para validação de formulário
*
* @author Marcus Vinicius Bastos Leandro
*         http://www.prosadigital.com/
*
* @create 2008-05-07
*/

/**
* Função que contém chamadas a funções
* que serão feitas no evento onload do window
*/
function doOnLoad(){

	//Adiciona função de validação aos forms
	adicionarValidacaoForms();

}

/**
* Função que adiciona ao evento onsubmit de todos os formulários
* do documento, a função de validação de formulário "validaForm()"
*
*/
function adicionarValidacaoForms(){

	var forms = document.forms;

	for ( var i = 0; i < forms.length; i++ ){

		forms[i].onsubmit = validaForm;

	}

}

/**
* Função que valida os campos obrigatórios num formulário.
* Para que um campos seja obrigatório, o valor do seu atributo
* 'title' deve começar com um asterísco (*)
*
* @return boolean
*/
var validaForm = function(){

	var frm = this;

	for (var i = 0; i < frm.elements.length; i++){

		if ( (frm.elements[i].title.substr(0,1)) == "*" ){

			if (frm.elements[i].value == ""){
				alert("O campo '"+frm.elements[i].title.substr(1,(frm.elements[i].title.length))+"' é de preenchimento obrigatório!");
				frm.elements[i].style.backgroundColor = "#ffffcc";
				frm.elements[i].focus();
				return false;
				break;
			}else{
				frm.elements[i].style.backgroundColor = "#efefef";
			}

		}

	}

	return true;
}

// Atribui ao evento onload da janela a função doOnLoad.
// OBS: Desta forma estamos trabalhando com javascript não-obstrutivo.
window.onload = doOnLoad;
</script>

</head>

<body>
<form id="form" name="form" method="post" action="teste.php">
  <table width="500" border="0" cellspacing="0" cellpadding="0" class="titulos">
    <tr>
      <td colspan="2">Nome
      <input type="text" name="nome" id="nome" title="*nome" /></td>
    </tr>
    <tr>
      <td colspan="2">Endereço
      <input type="text" name="endereco" id="endereco" title="*endereco" /></td>
    </tr>
    <tr>
      <td width="253">Bairro
        <label>
          <input type="text" name="bairro" id="bairro" title="*bairro">
        </label></td>
      <td width="247">Cidade
        <label>
          <input type="text" name="cidade" id="cidade" title="*cidade">
        </label></td>
    </tr>
    <tr>
      <td>CEP
        <label>
          <input type="text" name="cep" id="cep" title="*cep">
        </label></td>
      <td>Estado
        <select name="estado" class="formitens" id="estado" title="*estado">
          <option selected>Selecione seu Estado</option>
          <option value="Acre">Acre</option>
          <option value="Alagoas">Alagoas</option>
          <option value="Amazonas">Amazonas</option>
          <option value="Bahia">Bahia</option>
          <option value="Ceará">Ceará</option>
          <option value="Distrito Federal">Distrito Federal</option>
          <option value="Espírito Santo">Espírito Santo</option>
          <option value="Goiás">Goiás</option>
          <option value="Maranhão">Maranhão</option>
          <option value="Minas Gerais">Minas Gerais</option>
          <option value="Mato Grosso">Mato Grosso</option>
          <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
          <option value="Pará">Pará</option>
          <option value="Paraíba">Paraíba</option>
          <option value="Pernambuco">Pernambuco</option>
          <option value="Piauí">Piauí</option>
          <option value="Paraná">Paraná</option>
          <option value="Rio de Janeiro">Rio de Janeiro</option>
          <option value="Rio Grande do Norte">Rio Grande do Norte</option>
          <option value="Rio Grande do Sul">Rio Grande do Sul</option>
          <option value="Rondônia">Rondônia</option>
          <option value="Roraima">Roraima</option>
          <option value="Santa Catarina">Santa Catarina</option>
          <option value="São Paulo">São Paulo</option>
          <option value="Tocantins">Tocantins</option>
        </select></td>
    </tr>
    <tr>
      <td>Telefone
      <input type="text" name="telefone" id="telefone" title="*telefone" /></td>
      <td>E-mail
      <input type="text" name="email" id="email" title="*email" /></td>
    </tr>
    <tr>
      <td colspan="2"><table width="498" border="0" align="center" cellpadding="0" cellspacing="0" class="titulos">
        <tr>
          <td>Categoria</td>
          <td>Quantidade de quartos</td>
        </tr>
        <tr>
          <td>- single</td>
          <td><label>
            <select name="quarto_single" id="quarto_single">
              <option selected>00</option>
              <option>01</option>
              <option>02</option>
              <option>03</option>
              <option>04</option>
              <option>05</option>
              <option>06</option>
              <option>07</option>
              <option>08</option>
              <option>09</option>
              <option>10</option>
            </select>
          </label></td>
        </tr>
        <tr>
          <td>- duplo</td>
          <td><select name="quarto_duplo" id="quarto_duplo">
            <option selected>00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
        </tr>
        <tr>
          <td>- triplo</td>
          <td><select name="quarto_triplo" id="quarto_triplo">
            <option selected>00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
        </tr>
        <tr>
          <td>- suíte</td>
          <td><select name="quarto_suite" id="quarto_suite">
            <option selected>00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td>Check-in (entrada)</td>
      <td>Check-out (saída)</td>
    </tr>
    <tr>
      <td><input onClick="ds_sh(this);" name="check_in" readonly="readonly" style="cursor: text" title="*check_in" id="check_in" /></td>
      <td><input onClick="ds_sh(this);" name="check_out" readonly="readonly" style="cursor: text" title="*check_out" id="check_out" /></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td><label>
        <input type="reset" name="Reset" id="button" value="Reset">
      </label></td>
      <td><label>
        <input type="submit" name="button" id="button" value="Submit">
      </label></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</form>
</body>
</html>

Segue o código PHP:

<?php

	$nome = $_POST['nome'];
	$endereco = $_POST['endereco'];
	$bairro = $_POST['bairro'];
	$cidade = $_POST['cidade'];
	$cep = $_POST['cep'];
	$estado = $_POST['estado'];
	$telefone = $_POST['telefone'];
	$email = $_POST['email'];
	$check_in = $_POST['check_in'];
	$check_out = $_POST['check_out'];

	//para o envio em formato HTML
	header('Content-Type: text/html; charset=iso-8859-1\r\n');
	$headers = "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
	$headers .= "From: $email\r\n";
	$headers .= "Reply-To: $destino\r\n";
					
	$msg = "Nome: ".$nome;
	$msg .= "<br />";
	$msg .= "Endereço: ".$endereco;
	$msg .= "<br />";
	$msg .= "Bairro: ".$bairro;
	$msg .= "<br />";
	$msg .= "Cidade: ".$cidade;
	$msg .= "<br />";
	$msg .= "CEP: ".$cep;
	$msg .= "<br />";
	$msg .= "Estado: ".$estado;
	$msg .= "<br />";
	$msg .= "Telefone: ".$telefone;
	$msg .= "<br />";
	$msg .= "E-mail: ".$email;
	$msg .= "<br />";
	$msg .= "Check-in: ".$check_in;
	$msg .= "<br />";
	$msg .= "Check-out: ".$check_out;

	$destino = "email@dominio.com.br";
	mail($destino,"Contato Site Tal",$msg,$headers);

	$exibir_apos_sucesso='contato_sucesso.html';
	echo "<script>window.location='$exibir_apos_sucesso'</script>";
?>

mexicanox · Outubro 14, 2009

1- Como exigir que escolha o ESTADO, dando um alerta de erro, caso o campo selecionado seja "Selecione seu Estado"?

é a mesma coisa dos quartos so qeu em outro if

2- Como exigir que PELO MENOS UM DOS campos dos quartos seja preenchido com algum valor diferente de "00" (zero)?

la nos inputs é so voce adicionar o vlaue="#"

ta assim

<option selected> ... </option>

adiciona o value

<option selected value="#"> ... </option>

o codigo final ja com ja com o estado voce vai ter que modificar algumas coisas

function validar(){
   //inicia em ZERO uma variavel para contar os erros
   var erros = 0;
   //pega o valor do elemento pelo ID, no caso quarto_single
   //se esse valor for igual a # significa que o campo nao esta preenchido
   if(document.getElementById("quarto_single").value == "#"){
      //mostra um caixa de texto com a mensagem
      alert("Preencha o campo 'Quarto Single'");
      //acrecenta 1 a variavel erros
      erros ++;
   }

   //valida o ESTADO
   if(document.getElementById("estado").value == "#"){
      alert("Selecione o Estado");
      erros ++;
   }
   
   //se a variavel erros for maior que ZERO nao envia o formulario, por que tem algum campo faltando
   if(erros > 0) return false;
}

ai la no botao submit que envia o fomulario voce tira o onclick="return validar()"

e no form na mesma linha onde tem o name, id, action e method, voce adiciona o onclick="return validar()"

flws

RobertoC · Outubro 16, 2009

mexicanox, deu um erro doido aqui.

Fiz do jeito que tu falou, só complementando no script que postei.

Quando clico no Submit ele dá um alerta de que tem que preencher o campo quarto. Quando dou OK no alerta, ele abre um novo alerta dizendo que o campo Estado é obrigatório.

Aí se eu seleciono o campo NOME pra preencher, ele abre o alerta do quarto de novo.

Não teria como eu adicionar o campo obrigatório de um dos Quartos e do Estado nesse script que postei (que faz foco no campo e localiza o campo em branco por um asterisco no title)?

Eu tentei modificá-lo aqui, mas não deu certo.

Obrigado!

mexicanox · Outubro 19, 2009

primeiro, foi mal pela demora em responder.

agora vamos la, essa parte do codigo faz a verificação do quarto

if(document.getElementById("quarto_single").value == "#")

para que pelo menos 1 tipo de quarto tenha que ser selecionado voce adiciona um OU( || ) na condição, assim

if(document.getElementById("quarto_single").value == "#" || document.getElementById("outro_tipo_de_quarto").value == "#")

e assim com todos os quartos em que pelo menos um deve ser selecionado, ai é so colocar o id do campo

Uma outra coisa que eu nao sei onde tava com a cabeça na hora que te pedi fazer isso, lembra que eu falei pra voce ir la na linha do form onde tem name method action etc e colocar isso onclick="return validar()"

nao é onclick ? na verdade é onsubmit troca o onclick="return validar()" por onsubmit="return validar()"

ve se voce consegue fazer ai, qualquer coisa é so fala, agora ta meio complicado mais depois eu tento posta o codigo completo pra voce.

flws

RobertoC · Outubro 20, 2009

primeiro, foi mal pela demora em responder.

agora vamos la, essa parte do codigo faz a verificação do quarto

if(document.getElementById("quarto_single").value == "#")

para que pelo menos 1 tipo de quarto tenha que ser selecionado voce adiciona um OU( || ) na condição, assim

if(document.getElementById("quarto_single").value == "#" || document.getElementById("outro_tipo_de_quarto").value == "#")

e assim com todos os quartos em que pelo menos um deve ser selecionado, ai é so colocar o id do campo

Uma outra coisa que eu nao sei onde tava com a cabeça na hora que te pedi fazer isso, lembra que eu falei pra voce ir la na linha do form onde tem name method action etc e colocar isso onclick="return validar()"

nao é onclick ? na verdade é onsubmit troca o onclick="return validar()" por onsubmit="return validar()"

ve se voce consegue fazer ai, qualquer coisa é so fala, agora ta meio complicado mais depois eu tento posta o codigo completo pra voce.

flws

Cara, te agradeço demais pela ajuda.

Consegui fazer o código aqui funcionar perfeitamente, mas só tá rolando no FireFox.

Quando eu testo no Internet Explorer, ele vai pra página de formulário enviado com sucesso, mesmo não tendo preenchido nada e não envia email.

Seguem os códigos:

HTML (dentro do head)

<script type="text/javascript">
// SCRIPT QUE EXIGE QUE OS CAMPOS SEJAM PREENCHIDOS

function validar(){
	//pega o valor do elemento pelo ID, no caso "nome"
	//se esse valor for igual a NADA significa que o campo nao esta preenchido
	
	if(document.getElementById("nome").value == ""){
		alert("O campo 'NOME' deve ser preenchido.");
		nome.focus();
		nome.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			nome.style.backgroundColor = "#fff";
		}
	
	if(document.getElementById("endereco").value == ""){
		alert("O campo 'ENDEREÇO' deve ser preenchido.");
		endereco.focus();
		endereco.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			endereco.style.backgroundColor = "#fff";
		}
	
	if(document.getElementById("bairro").value == ""){
		alert("O campo 'BAIRRO' deve ser preenchido.");
		bairro.focus();
		bairro.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			bairro.style.backgroundColor = "#fff";
		}

	if(document.getElementById("cidade").value == ""){
		alert("O campo 'CIDADE' deve ser preenchido.");
		cidade.focus();
		cidade.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			cidade.style.backgroundColor = "#fff";
		}
		
	if(document.getElementById("cep").value == ""){
		alert("O campo 'CEP' deve ser preenchido.");
		cep.focus();
		cep.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			cep.style.backgroundColor = "#fff";
		}
	
	if(document.getElementById("estado").value == "#"){
		alert("O campo 'ESTADO' deve ser selecionado.");
		estado.focus();
		return false;
	}
	
	if(document.getElementById("telefone").value == ""){
		alert("O campo 'TELEFONE' deve ser preenchido.");
		telefone.focus();
		telefone.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			telefone.style.backgroundColor = "#fff";
		}
		
	if(document.getElementById("email").value == "" || document.getElementById("email").value.indexOf('@', 0) == -1 || document.getElementById("email").value.indexOf('.', 0) == -1){
		alert("O campo 'EMAIL' deve ser preenchido corretamente.");
		email.focus();
		email.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			email.style.backgroundColor = "#fff";
		}
		
	if (document.getElementById("quarto_single").value == "#" && document.getElementById("quarto_duplo").value == "#" && document.getElementById("quarto_triplo").value == "#" && document.getElementById("quarto_suite").value == "#") {
		alert("Pelo menos uma das opções de quartos deve ser escolhida.");
		return false;
	}
	
	if(document.getElementById("check_in").value == ""){
		alert("O campo 'CHECK IN' deve ser preenchido.");
		check_in.focus();
		check_in.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			check_in.style.backgroundColor = "#fff";
		}

	if(document.getElementById("check_out").value == ""){
		alert("O campo 'CHECK OUT' deve ser preenchido.");
		check_out.focus();
		check_out.style.backgroundColor = "#cdcdcd";
		return false;
	}
		else {
			check_out.style.backgroundColor = "#fff";
		}
}
</script>

HTML (formulário)

<form id="form" name="form" method="post" action="teste.php">
  <table width="500" border="0" align="center" cellpadding="1" cellspacing="0" class="titulos">
    <tr>
      <td>Nome      </td>
      <td colspan="3"><input name="nome" type="text" id="nome" title="nome" size="60" /></td>
    </tr>
    <tr>
      <td>Endereço      </td>
      <td colspan="3"><input name="endereco" type="text" id="endereco" title="endereco" size="60" /></td>
    </tr>
    <tr>
      <td width="63">Bairro</td>
      <td width="179"><input type="text" name="bairro" id="bairro" title="bairro"></td>
      <td width="60">Cidade</td>
      <td width="195"><input name="cidade" type="text" id="cidade" title="cidade" size="20"></td>
    </tr>
    <tr>
      <td>CEP</td>
      <td><input type="text" name="cep" id="cep" title="cep"></td>
      <td>Estado        </td>
      <td><select name="estado" class="formitens" id="estado" title="estado">
        <option selected value="#">Selecione</option>
        <option value="Acre">Acre</option>
        <option value="Alagoas">Alagoas</option>
        <option value="Amazonas">Amazonas</option>
        <option value="Bahia">Bahia</option>
        <option value="Ceará">Ceará</option>
        <option value="Distrito Federal">Distrito Federal</option>
        <option value="Espírito Santo">Espírito Santo</option>
        <option value="Goiás">Goiás</option>
        <option value="Maranhão">Maranhão</option>
        <option value="Minas Gerais">Minas Gerais</option>
        <option value="Mato Grosso">Mato Grosso</option>
        <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
        <option value="Pará">Pará</option>
        <option value="Paraíba">Paraíba</option>
        <option value="Pernambuco">Pernambuco</option>
        <option value="Piauí">Piauí</option>
        <option value="Paraná">Paraná</option>
        <option value="Rio de Janeiro">Rio de Janeiro</option>
        <option value="Rio Grande do Norte">Rio Grande do Norte</option>
        <option value="Rio Grande do Sul">Rio Grande do Sul</option>
        <option value="Rondônia">Rondônia</option>
        <option value="Roraima">Roraima</option>
        <option value="Santa Catarina">Santa Catarina</option>
        <option value="São Paulo">São Paulo</option>
        <option value="Tocantins">Tocantins</option>
      </select></td>
    </tr>
    <tr>
      <td>Telefone      </td>
      <td><input type="text" name="telefone" id="telefone" title="telefone" maxlength="13" /></td>
      <td>E-mail        </td>
      <td><input name="email" type="text" id="email" title="email" size="20" /></td>
    </tr>
    <tr>
      <td colspan="4"> </td>
    </tr>
    <tr>
      <td colspan="4"><table width="498" border="0" align="center" cellpadding="0" cellspacing="0" class="titulos1">
        <tr>
          <td width="89">Categoria</td>
          <td colspan="2" align="left">Quantidade de quartos</td>
          <td width="195">Check-in (entrada)</td>
        </tr>
        <tr>
          <td>- single</td>
          <td width="45" align="left"> </td>
          <td width="169" align="left"><select name="quarto_single" id="quarto_single">
            <option selected value="#">00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
          <td><input name="check_in" id="check_in" style="cursor: text" title="check_in" onClick="ds_sh(this);" size="20" readonly="readonly" /></td>
        </tr>
        <tr>
          <td>- duplo</td>
          <td align="left"> </td>
          <td align="left"><select name="quarto_duplo" id="quarto_duplo">
            <option selected value="#">00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
          <td> </td>
        </tr>
        <tr>
          <td>- triplo</td>
          <td align="left"> </td>
          <td align="left"><select name="quarto_triplo" id="quarto_triplo">
            <option selected value="#">00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
          <td>Check-out (saída)</td>
        </tr>
        <tr>
          <td>- suíte</td>
          <td align="left"> </td>
          <td align="left"><select name="quarto_suite" id="quarto_suite">
            <option selected value="#">00</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
          </select></td>
          <td><input name="check_out" id="check_out" style="cursor: text" title="check_out" onClick="ds_sh(this);" size="20" readonly="readonly" /></td>
        </tr>
      </table></td>
      </tr>
    <tr>
      <td colspan="4"> </td>
      </tr>
    <tr>
      <td colspan="4">      </tr>
    <tr>
      <td colspan="4"><table width="98" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
          <td width="98" align="left"><input type="image" name="button" id="button2" value="Submit" src="images/bt_enviar.jpg" width="43" height="44" onClick="return validar()"></td>
        </tr>
      </table>          
    </tr>
  </table>
</form>

PHP de envio

<?php

	$nome = $_POST['nome'];
	$endereco = $_POST['endereco'];
	$bairro = $_POST['bairro'];
	$cidade = $_POST['cidade'];
	$cep = $_POST['cep'];
	$estado = $_POST['estado'];
	$telefone = $_POST['telefone'];
	$email = $_POST['email'];
	$quarto_single = $_POST['quarto_single'];
	$quarto_duplo = $_POST['quarto_duplo'];
	$quarto_triplo = $_POST['quarto_triplo'];
	$quarto_suite = $_POST['quarto_suite'];
	$check_in = $_POST['check_in'];
	$check_out = $_POST['check_out'];

	//para o envio em formato HTML
	header('Content-Type: text/html; charset=iso-8859-1\r\n');
	$headers = "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
	$headers .= "From: $email\r\n";
	$headers .= "Reply-To: $destino\r\n";
					
	$msg = "Nome: ".$nome;
	$msg .= "<br />";
	$msg .= "Endereço: ".$endereco;
	$msg .= "<br />";
	$msg .= "Bairro: ".$bairro;
	$msg .= "<br />";
	$msg .= "Cidade: ".$cidade;
	$msg .= "<br />";
	$msg .= "CEP: ".$cep;
	$msg .= "<br />";
	$msg .= "Estado: ".$estado;
	$msg .= "<br />";
	$msg .= "Telefone: ".$telefone;
	$msg .= "<br />";
	$msg .= "E-mail: ".$email;
	$msg .= "<br />";
	$msg .= "Quarto single: ".$quarto_single;
	$msg .= "<br />";
	$msg .= "Quarto duplo: ".$quarto_duplo;
	$msg .= "<br />";
	$msg .= "Quarto triplo: ".$quarto_triplo;
	$msg .= "<br />";
	$msg .= "Quarto suíte: ".$quarto_suite;
	$msg .= "<br />";
	$msg .= "Check-in: ".$check_in;
	$msg .= "<br />";
	$msg .= "Check-out: ".$check_out;

	$destino = "email@dominio.com.br";
	mail($destino,"Contato Site",$msg,$headers);

	$exibir_apos_sucesso='contato_sucesso.html';
	echo "<script>window.location='$exibir_apos_sucesso'</script>";
?>

Acredito que tenha que ter um IF dizendo que "se todos os campos obrigatórios estiverem preenchidos, enviar o formulário". Não?

mexicanox · Outubro 20, 2009

exato, tem que fazer um if sim.

Uma ideia é voce iniciar uma variavel com valor 0(zero), ai sempre que acorrer um erro voce incrementa a variavel:

Exemplo

if(document.getElementById("nome").value == ""){
                alert("O campo 'NOME' deve ser preenchido.");
                nome.focus();
                nome.style.backgroundColor = "#cdcdcd";
                //aqui incrementa a variavel erros, o nome fica a sua escolha
                erros ++;
                //pode retirar o return false por que agora voce vai usar ele la em baixo
        }

Ai la no final do formulario tem que ser depois de todas as validaçoes voce verifica se a variavel com os erros, zero significa nenhum erro, mais do que zero significa algum erro

Exemplo:

if(erros > 0){
   return false
}

ve ai se funciona

flws

RobertoC · Outubro 21, 2009

Fiz assim como disse (adicionei a variável, removi os return false, adicionei ++ em cada erro e coloquei um return false lá no fim com a var > 0

Se eu não preencho nada e dou um OK, ele dá o alerta de erro do NOME e depois sequencialmente todos os outros erros, sem parar hehehe

Acho que tem que ter algo pra fazer parar a função de validação quando acusar um erro, não?

mexicanox · Outubro 21, 2009

voce pode mostrar todos os erros em um alert

na variavel de erros inicia ela com um valor vazio "" e em vez de colocar ++ voce poe

variavelErro += "Nome do campo com erros\n" //O \n é pra dar a quebra de linha e mostrar um embaixo do outro.

e nao esquece de tirar o alert que mostra onde esta o erro, por que agora voce vai usar a variavel que tem os erros

ai la em baixo verica se ela é diferente de vazio

if(variavelErro != ""){
  alert(variavelErro);
  return false
}

flws

RobertoC · Outubro 22, 2009

Mas eu não queria que mostrasse todos erros juntos.

A idéia é que a cada clique no "enviar", dê um alert do primeiro campo que está vazio e foque nele. O que está acontecendo: quando clico no "enviar", ele vai dando todos os alerts de todos os campos em branco.

Voltei pro arquivo como era (sem a variável e com os "return false" a cada erro.

Agora funciona perfeitamente no FireFox, mas no Internet Explorer dá pau.

Se tiver como, acessa o endereço http://testeswwg.tegea.uni5.net/bertelli/reservas.html e clica no "enviar" sem preencher nada pra entender melhor o que ocorre.

William Bruno · Outubro 22, 2009

Apesar do debug de Javascript do IE ser horrível, o erro era claro: 'nome não definido'. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

segue:

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function preenchido( el, campo ){
	if( el.value=='' ){
		alert("O campo '"+campo+"' deve ser preenchido.");
		el.focus();
		el.style.backgroundColor = "#cdcdcd";
		return false;
	} else {
		el.style.backgroundColor = "#fff";
	}
}
function nao_preenchido( el, campo ){
	alert("O campo '"+campo+"' deve ser preenchido.");
	el.focus();
	el.style.backgroundColor = "#cdcdcd";
	return false;	
}
function okay( el ){
	el.style.backgroundColor = '#fff';
}
function validar(){
	var nome  = id('nome');
	var endereco = id('endereco');
	var bairro = id('bairro');
	var cidade = id('cidade');
	var cep = id('cep');
	var estado = id('estado');
	var telefone = id('telefone');
	var email = id('email');
	var quarto_single = id('quarto_single');
	var check_in = id('check_in');
	var check_out = id('check_out');
	

	if( nome.value=='' ){
		return nao_preenchido( nome, 'NOME');
	}else {
		okay( nome );
	}
	if( endereco.value=='' ){
		return nao_preenchido( endereco, 'ENDERECO');
	} else {
		okay( endereco );
	}
}
</script>

basta implementar nesse esquema para os outros campos. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

RobertoC · Outubro 22, 2009

William, funcionou perfeitamente!

Só fiquei com um último galho...

Como eu faço essa parte alertar "Pelo menos um dos quartos deve ser preenchido"? Está funcionando, mas queria trocar a mensagem de erro.

if ( quarto_single.value == "#" && quarto_duplo.value == "#" && quarto_triplo.value == "#" && quarto_suite.value == "#" ) {
return nao_preenchido ( quarto_single, 'QUARTO SINGLE');
} else {
okay ( quarto_single );
}

William Bruno · Outubro 22, 2009

opa! que bom ^_^

ii rapaz, nesse caso ai, faz outra função, ou chama diretamente:

if ( quarto_single.value == "#" && quarto_duplo.value == "#" && quarto_triplo.value == "#" && quarto_suite.value == "#" ) {
        alert("Pelo menos um dos quartos deve ser preenchido");
        quarto_single.focus();
        quarto_single.style.backgroundColor = "#cdcdcd";
        return false; 
} else {
        okay ( quarto_single );
}

Arquivado

[Resolvido] Problema! Formulário PHP não funciona

Recommended Posts

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mexicanox 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501