Validar campos(Sou iniciante)
Galera comprei um livro que me ensinou um pouco mais sobre ajax, nesse livro ele ensinou a fazer um script muito show de bola., carregando paginas sem refresh. Bem explicativo por sinal...
Fiz ele e funcionou numa boa, porém tive dificuldade de colocar uma função para validar os campos do formulario da pagina de contato.
Eu estou disponibilizando o download para vocês me ajudarem, quem quiser utilizar a função, sinta-se a vontade. Acho que pode ser legal colocarmos na seção de scripts, fica por conta de vocÊs.
Mas o que preciso resolver é a questão da validação alguem pode me ajudar?
index.php
--------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="bibliotecaAjax.js"></script>
<script type="text/javascript" src="site.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Web Interativa com Ajax e PHP</title>
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="3"><span id="avisos"></span></td>
</tr>
<tr valign="top">
<td width="150" class="fundocinza">
<p class="titulo">Categorias</p>
<p><?php include "menu.php"; ?></p>
</td>
<td width="20"> </td>
<td width="630" class="fundolaranja">
<div id="conteudo"></div>
</td>
</tr>
</table>
</body>
</html>contato.php
-----------------
conteudo da pagina contato
<script type="text/javascript">
<? //valida os campos ?>
function gravaData(){
var erro = false;
var objeto;
var mensagem = "Preencha os campos vazios\n";
if (document.form1.nome.value == ""){
mensagem = mensagem + "\n- Data";
if (!erro){objeto = document.form1.nome;}
erro = true;
}
if (erro) {
window.alert (mensagem);
objeto.focus();
return false;
}
}
</script>
<form method="post" action="" name="form1">
Nome: <input name="nome" tabindex="1" type="text" value="" />
<input type="submit" tabindex="5" value="Gravar" onClick="return gravaData()" />
</form>menu.php
--------------
<a href="javascript:Site('inicio','0');">Home</a><br>
<a href="javascript:Site('contato','1');">Contato</a><br>principal.php
-------------------
conteudo da pagina principal
bibliotecaAjax.js
---------
var ajax;
var dadosUsuario;// ------- cria o objeto e faz a requisição -------
function requisicaoHTTP(tipo,url,assinc){
if(window.XMLHttpRequest){ // Mozilla, Safari,...
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject){ // IE
ajax = new ActiveXObject("Msxml2.XMLHTTP");
if (!ajax) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(ajax) // iniciou com sucesso
iniciaRequisicao(tipo,url,assinc);
else
alert("Seu navegador não possui suporte a essa aplicação!");
}// ------- Inicializa o objeto criado e envia os dados (se existirem) -------
function iniciaRequisicao(tipo,url,bool){
ajax.onreadystatechange=trataResposta;
ajax.open(tipo,url,bool);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
//ajax.overrideMimeType("text/XML"); /* usado somente no Mozilla */
ajax.send(dadosUsuario);
}// ------- Inicia requisição com envio de dados -------
function enviaDados(url){
criaQueryString();
requisicaoHTTP("POST",url,true);
}// ------- Cria a string a ser enviada, formato campo1=valor1&campo2=valor2... -------
function criaQueryString(){
dadosUsuario="";
// var frm = document.forms[0];
var frm = document.getElementById("formAjax");
var numElementos = frm.elements.length;
for(var i = 0; i < numElementos; i++) {
if(i < numElementos-1) {
dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&";
} else {
dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
}
}
}// ------- Trata a resposta do servidor -------
function trataResposta(){
if(ajax.readyState == 4){
if(ajax.status == 200){
trataDados(); // criar essa função no seu programa
} else {
alert("Problema na comunicação com o objeto XMLHttpRequest.");
}
}
}site.js
-----------------
window.onload = function(){
Site('inicio', 0);
}
function Site(secao, parametro){
Aviso(1);
var url="carrega.php?"+secao+"="+encodeURIComponent(parametro);
requisicaoHTTP("GET",url,true);
}
function Aviso(exibir) {
var saida = document.getElementById("avisos");
if(exibir){
saida.className = "aviso";
saida.innerHTML = "Aguarde...processando!";
}
else {
saida.className = "";
saida.innerHTML = "";
}
}
function trataDados(){
var info = ajax.responseText;
var saida = document.getElementById("conteudo");
saida.innerHTML = info;
Aviso(0);
}estilos.css
--------------------------
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
}
.descricao {
font-size: 10pt;
font-weight:normal;
text-decoration:underline;
}
.rodape {
font-size: 9pt;
font-weight:normal;
background-color: #EEEEEE;
}.preco {color: #006600}
.frete {color: #0000FF}
.promocao {
color: #FF0000;
font-size: 8pt;
}.titulo {font-size: 14pt}
.erro {
font-size: 14pt;
color:#FF0000;
}.fundocinza {background-color:#EEEEEE}
.fundolaranja {background-color:#FFF2E6}
.aviso {
border: thin solid black;
font-size: 12pt;
font-weight:bold;
color: #000000;
background-color: #FFFF00;
}São vários arquivos...deu pra entender?
Discussão (1)
Carregando comentários...