Jump to content


Photo

Formulario Com Mensagens No Campos


  • Faça o login para participar
6 replies to this topic

#1 dvdpausini

dvdpausini

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Masculino
  • Localidade:SAMPA

Posted 18/03/2009, 11:17

Oi alguem sabe aonde eu acho os codigos para fazer um formulario igual a esse no link:

http://www.midpublic...om.br/form.html

[o legal desse formulario é a mensagem que abre ao pasar o mouse no campo, pensei que fosse TOOLTIP mas ele é bem dinamico e nao estatico como o TOOLTIP do css]

Bem eu nao sei nem o nome que é usado, XML ou outra coisa

Edição feita por: dvdpausini, 18/03/2009, 12:13.


#2 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 18/03/2009, 13:38

Cara pelo que eu vi os codes é em js, segue abaixo para voce ver:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="form.js" type="text/javascript"></script>
<style type="text/css">html,body{height:100%; margin:0;}
.tbmain{ 
 /* Changes on the form */
 background: white !important; 
}
.left{
  /* Changes on the form */
  color: black !important; 
  font-family: Verdana !important;
  font-size: 12px !important;
}
.head{
  color:#333333;
  font-size:20px;;
  text-decoration:underline;
  font-family:"Verdana";
}
td.left {
  font-family:"Verdana";
  font-size:12px;
  color:black;
}
.pagebreak{
  font-family:"Verdana";
  font-size:12px;
  color:black;
}
.tbmain{
  height:100%;
  background:white;
}
span.required{
  font-size: 13px !important;
  color: red !important;
}

div.backButton{
	background: transparent url("http://www.jotform.com//images/btn_back.gif") no-repeat 

scroll 0 0;
	height:16px;
	width:53px;
	float:left;
	margin-bottom:15px;
	padding-right:5px;
}
div.backButton:hover{
	background: transparent url("http://www.jotform.com//images/btn_back_over.gif") 

no-repeat scroll 0 0;
}
div.backButton:active{
	background: transparent url("http://www.jotform.com//images/btn_back_down.gif") 

no-repeat scroll 0 0;
}
div.nextButton{
	background: transparent url("http://www.jotform.com//images/btn_next.gif") no-repeat 

scroll 0 0;
	height:16px;
	width:53px;
	float: left;
	margin-bottom:15px;
	padding-right:5px;
}
div.nextButton:hover{
	background: transparent url("http://www.jotform.com//images/btn_next_over.gif") 

no-repeat scroll 0 0;
}
div.nextButton:active{
	background: transparent url("http://www.jotform.com//images/btn_next_down.gif") 

no-repeat scroll 0 0;
}
.pageinfo{
	padding-right:5px;
	margin-bottom:15px;
	float:left;
}

</style> 
</head>
<body>
<table width="100%" cellpadding="2" cellspacing="0" class="tbmain">
<tr><td class="topleft" width="10" height="10">&nbsp;</td>
<td class="topmid">&nbsp;</td>
<td class="topright" width="10" height="10">&nbsp;</td>
  </tr>
<tr>
<td class="midleft" width="10">&nbsp;&nbsp;&nbsp;</td>
<td class="midmid" valign="top">
<form enctype="multipart/form-data"  action="form3.php"  method="post" name="form3">
<input type="hidden" name="form3" value="form3" />
<div id="main"> 
<div class="pagebreak"> 
<input type="hidden" id="spc" name="spc" value="spc" />
<script type="text/javascript">
   document.getElementById('spc').value = 'form3';
</script>
<table width="520" cellpadding="5" cellspacing="0">
 <tr >
  <td width="150" class="left" >
   <label >Nome <span class="required">*</span></label>
  </td>
  <td class="right" >
   <input type="text" size="20" name="q0_Nome" class="text" value="" 

id="q0"onmouseover="ddrivetip('Favor digitar seu nome completo', 200)" 

onmouseout="hideddrivetip()"  onblur="validate(this,'RequiredAlphabetic')"  maxlength="100" 

maxsize="100" />
  </td>
 </tr>
 <tr >
  <td width="150" class="left" >
   <label >E-mail <span class="required">*</span></label>
  </td>
  <td class="right" >
   <input type="text" size="20" name="q2_Email" class="text" value="" 

id="q2"onmouseover="ddrivetip('Digite seu e-mail', 200)" onmouseout="hideddrivetip()"  

onblur="validate(this,'Email')"  maxlength="100" maxsize="100" />
  </td>
 </tr>
 <tr >
  <td width="150" class="left" >
   <label >Telefone</label>
  </td>
  <td class="right" >
   <input type="text" size="20" name="q11_Telefone" class="text" value="" 

id="q11"onmouseover="ddrivetip('Favor informar seu telefone', 200)" 

onmouseout="hideddrivetip()"  onblur="validate(this,'Numeric')"  maxlength="100" 

maxsize="100" />
  </td>
 </tr>
 <tr >
  <td width="150" class="left" >
   <label >Cidade</label>
  </td>
  <td class="right" >
   <input type="text" size="20" name="q4_Cidade" class="text" value="" 

id="q4"onmouseover="ddrivetip('Informe sua cidade', 200)" onmouseout="hideddrivetip()"  

maxlength="100" maxsize="100" />
  </td>
 </tr>
 <tr >
 
 </tr>
 <tr >
  <td width="150" class="left" valign="top"  >
   <label>Mensagem <span class="required">*</span></label>
  </td>
  <td class="right" >
   <textarea cols="35" rows="10" name="q7_Mensagem" class="text" 

id="q7"onmouseover="ddrivetip('Digite sua mensagem', 200)" onmouseout='hideddrivetip()'  

onblur="validate(this,'RequiredAlphabetic')" ></textarea>
  </td>
 </tr>
 <tr >
  <td width="150" class="left" >&nbsp;
   
  </td>
  <td class="right">
  <input type="submit" class="btn" value="Enviar " />
 </td>
 </tr>
</table>
</div>
</div>
</form>
</td>
<td class="midright" width="10">&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
 <td class="bottomleft" width="10" height="10">&nbsp;</td>
 <td class="bottommid">&nbsp;</td>
 <td class="bottomright" width="10" height="10">&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
validate("q_form_90761534621");
</script>

</body>
</html>

JS
/*################################################################*\
	   JotForm Forms Framework V1.2.0 | Interlogy LLC.
\*################################################################*/
/////// Defining the source domain of images.
/////// don't change these variables
/////////////////////////////////////////////

if(location.href.match(/https/))
	var url = "https://www.jotform.com";
else
	var url = "http://www.jotform.com";
//////// Prototype's $ function
///////////////////////////////
function $jt(){
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) { 
	var element = arguments[i];
	if (typeof element == 'string')
	  element = document.getElementById(element);
	if (arguments.length == 1)	
	  return element;
	elements.push(element);
  }
  return elements;
}

///////// Birthdate picker 
///////////////////////////////////
function getdate(elem){
	id = elem.id.split("_");
	day = $jt("day_"+id[1]).options[$jt("day_"+id[1]).selectedIndex].value;
	month = $jt("month_"+id[1]).options[$jt("month_"+id[1]).selectedIndex].value;
	year = $jt("year_"+id[1]).options[$jt("year_"+id[1]).selectedIndex].value;
	$jt("date_"+id[1]).value = month+" / "+day+" / "+year;
}

///////// AutoComplete functions
///////////////////////////////////
function Complete(obj, evt) {
  if ((!obj) || (!evt) || (auto.length == 0)){return;}
  if (obj.value.length == 0){ return; }
  var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;
  if ((elm < 32) || (elm >= 33 && elm <= 46) || (elm >= 112 && elm <= 123)) { return; }
  var txt = obj.value.replace(/;/gi, ",");
  elm = txt.split(",");
  txt = elm.pop();
  txt = txt.replace(/^\s*/, "");

  if (txt.length == 0){return;}
  if (obj.createTextRange) {
   	var rng = document.selection.createRange();
		  if (rng.parentElement() == obj) {
   			elm = rng.text;
	   		var ini = obj.value.lastIndexOf(elm);
		  }
  } else if (obj.setSelectionRange) {
		  var ini = obj.selectionStart;
  }
  for (var i = 0; i < auto.length; i++) {
   	elm = auto[i].toString();
		  if (elm.toLowerCase().indexOf(txt.toLowerCase()) == 0) {
   			obj.value += elm.substring(txt.length, elm.length);
	   		break;
		  }
  }
  if (obj.createTextRange) {
		  rng = obj.createTextRange();
		  rng.moveStart("character", ini);
		  rng.moveEnd("character", obj.value.length);
		  rng.select();
  } else if (obj.setSelectionRange) {
		  obj.setSelectionRange(ini, obj.value.length);
  }
}

///////// sum function for payment objects
//////////////////////////////////////////
function sum(radio,t){
	if(!$jt('res')){
		return true;
	}
	var val = new Array();
	if(radio.type!='radio'){
		tot1=parseFloat($jt('hid').value);
		if(t){
			tot2=parseFloat(price[radio.value])+parseFloat(setup[radio.value]);
		}else
			tot2=parseFloat(price[radio.value]);
		if(radio.checked)
			tot1=tot1+tot2;
		else 
			tot1=tot1-tot2;
		tot1 = tot1.toFixed(2);
		$jt('hid').value=tot1;
		$jt('res').innerHTML = tot1;
	}else{
		val = price[radio.value].split(':');
		rval = parseFloat(val[0]);
		rval = rval.toFixed(2);
		$jt('res').innerHTML = rval;
	}
}

/////////Prototypes Clipp functions
///////////////////////////////////
function makeClipping(element){ 
	if (element._overflow) return element;
	element._overflow = element.style.overflow || 'auto';
	if ((element.style.overflow || 'visible') != 'hidden')
	  element.style.overflow = 'hidden';
	return element;
}
/////////Prototypes Clipp functions
///////////////////////////////////
function undoClipping(element){
	if (!element._overflow) return element;
	element.style.overflow = element._overflow == 'auto' ? '' : element._overflow;
	element._overflow = null;
	return element;
}
/////////Prototypes Dimention functions
///////////////////////////////////////
function getDimentions(e){
	element = e;
	var display = element.style.display;
	if (display != 'none' && display != null) // Safari bug
	  return {width: element.offsetWidth, height: element.offsetHeight};
	var els = element.style;
	var originalVisibility = els.visibility;
	var originalPosition = els.position;
	var originalDisplay = els.display;
	els.visibility = 'hidden';
	els.position = 'absolute';
	els.display = 'block';
	var originalWidth = element.clientWidth;
	var originalHeight = element.clientHeight;
	els.display = originalDisplay;
	els.position = originalPosition;
	els.visibility = originalVisibility;
	return {width: originalWidth, height: originalHeight};
}
//////// Effect for sliding down and show
/////////////////////////////////////////
var orgH = new Object();
function blindDown(elem, id, dur){
	if(!dur){
		var dur = 0;
		orgH[elem.id] = getDimentions(elem).height;
		makeClipping(elem);
		elem.style.display = "block";
	}
	elem.style.height = (dur+=25)+"px";
	if(dur <= orgH[elem.id])
		setTimeout(function(){ blindDown(elem, id, dur) },50);
	else{
		undoClipping(elem);
		elem.style.height = orgH[elem.id]+"px";
		elem.style.padding = "2px";
		window.location = "#td_"+id;
	}
}
//////// Effect for sliding up and hide
/////////////////////////////////////////
function blindUp(elem, id, dur){
	if(!dur){
		makeClipping(elem);
		var dur = getDimentions(elem).height;
		orgH[elem.id] = dur;
	}
	dur -= 25;
	if(dur > 0){
		elem.style.height = dur+"px";
		setTimeout(function(){ blindUp(elem, id, dur) },50);
	}else{
		undoClipping(elem);
		elem.style.display = "none";
		elem.style.height = orgH[elem.id]+"px";
		elem.style.padding = "2px";
		window.location = "#td_"+id;
	}
}
//////// Form collapse functions
////////////////////////////////
var tool = "";
function closeDiv(id){
	var id2 = 'div_'+id;
	var currdiv= $jt(id2);
	var the_divs=document.getElementsByTagName('div');
	var re = RegExp(/^div_/i);
	for(var n=0;n<the_divs.length;n++)
		if(the_divs[n].id.match(re))
			if (the_divs[n].id==id2 && the_divs[n].style.display == 'none'){
				blindDown(the_divs[n], id);
			}else if(the_divs[n].style.display == 'block'){
				blindUp(the_divs[n], id);
			}
	var the_tds=document.getElementsByTagName('td');
	var id3 = 'td_'+id;
	var tdElem = $jt(id3);
	var re = RegExp(/^td_/i);
	var show = 'url('+url+'/images/splitter_right_show.gif)';
	var hide = 'url('+url+'/images/splitter_right_hide.gif)';
	if(tdElem.style.backgroundImage == show){
		tdElem.style.backgroundImage = hide;
	}else{
		for(var n=0;n<the_tds.length;n++){
			if(the_tds[n].id.match(re)){
				if (the_tds[n].style.backgroundImage == show){
					the_tds[n].style.backgroundImage = hide;
					}
				}
			}
		tdElem.style.backgroundImage = show;
	}
}

//////// Functions for star rating
//////////////////////////////////
function rate(elem,val,hid){
	$jt(hid).value = val;
}
function resetRate(elem,hid){
	var val = $jt(hid).value;
	if(val == "")
		elem.style.backgroundImage="url("+url+"/images/star0.gif)";
	else
		elem.style.backgroundImage="url("+url+"/images/star"+val+".gif)";
}
function changeColor(val,tab){
	$jt(tab).style.backgroundImage="url("+url+"/images/star"+val+".gif)";
}

//////// Tooltip code
///////////////////////
var offsetfromcursorX=12
var offsetfromcursorY=10
var offsetdivfrompointerX=10
var offsetdivfrompointerY=14
var table  = '<div id="tooltip" style="display:none; position:absolute;z-index: 100;opacity: 

.9;filter: alpha(opacity=90);">';
	table += '<table border="0" cellpadding="0" cellspacing="0">';
	table += '  <tr><td width="1" height="8" 

background="'+url+'/images/tooltip_top.gif"></td>';
	table += '	<td align="left" background="'+url+'/images/tooltip_top.gif"><img 

src="'+url+'/images/tooltip_arrow.gif" width="20" height="8" /></td>';
	table += '	<td width="1" background="'+url+'/images/tooltip_top.gif"></td>';
	table += '  </tr><tr>';
	table += '  <td bgcolor="#b1bfcc"></td>';
	table += '	<td bgcolor="#edf4fa"><div style="padding:10px; font-family:\'Trebuchet 

MS\'; font-size:12px; color:black" id="tooltipinner"></div></td>';
	table += '	<td bgcolor="#b1bfcc"></td>';
	table += '  </tr><tr>';
	table += '	<td height="1" bgcolor="#b1bfcc"></td>';
	table += '	<td bgcolor="#b1bfcc"></td>';
	table += '	<td bgcolor="#b1bfcc"></td>';
	table += '  </tr>';
	table += '</table>';
	table += '</div>';
document.write(table)
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj	 = document.all? document.all["tooltipinner"] : document.getElementById? 

$jt("tooltipinner") : ""
var pointerobj = document.all? document.all["tooltip"]	  : document.getElementById? 

$jt("tooltip") : ""
function ietruebody(){
	return (document.compatMode && document.compatMode!="BackCompat")? 

document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
	if(thetext != ""){
		if (ns6||ie){
		 	if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px";
			if (typeof thecolor!="undefined" && thecolor!="") 

tipobj.style.backgroundColor=thecolor;
			tipobj.innerHTML=thetext;
			enabletip=true;
			return false;
		}		
	}
}
function positiontip(e){
	if (enabletip){
		var nondefaultpos=false
		var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
		var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
		var winwidth=ie&&!window.opera? ietruebody().clientWidth : 

window.innerWidth-20
		var winheight=ie&&!window.opera? ietruebody().clientHeight : 

window.innerHeight-20
		var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : 

winwidth-e.clientX-offsetfromcursorX
		var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY 

: winheight-e.clientY-offsetfromcursorY
		var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
		if (rightedge<tipobj.offsetWidth){
			tipobj.style.left=curX-tipobj.offsetWidth+"px"
		nondefaultpos=true
	}
	else if (curX<leftedge)
		tipobj.style.left="5px"
	else{
		tipobj.style.left=(curX+offsetfromcursorX-offsetdivfrompointerX-25)+"px" 

//position the horizontal position of the menu where the mouse is positioned
		pointerobj.style.left=(curX+offsetfromcursorX-25)+"px"
	}
	if (bottomedge<tipobj.offsetHeight){
		tipobj.style.top=(curY-tipobj.offsetHeight-offsetfromcursorY+15)+"px"
		nondefaultpos=true
	}
	else{
		tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
		pointerobj.style.top=curY+offsetfromcursorY+"px"
	}
	//tipobj.style.visibility="visible"
	tipobj.style.display = "block"
	pointerobj.style.display = "block"
	}
}
function hideddrivetip(){
	if (ns6||ie){
		enabletip=false
		//tipobj.style.visibility="hidden"
		tipobj.style.display = "none"
		pointerobj.style.display = "none"
		tipobj.style.left="-1000px"
		tipobj.style.backgroundColor=''
		tipobj.style.width=''
	}
}
document.onmousemove=positiontip
//////// Validation library V2
//////////////////////////////
var errored = false;			// Global for validate function
var exClassName = new Object(); // Global for Changed classnames
var styleAdded = false;		 // Global for checking sytle status

// page break object
var pageBreak = new pageBreak();

function validate(elem,type,option){	// Main function

	if (typeof(pageBreak.formName) == 'undefined'){
		pageBreak.formName = elem;
		pageBreak.setInitialStatus();
	}

	var option = (option)? option : "";
	if(!styleAdded){			// Add style for Error warnings
		var style = document.createElement('style');
		var sprop  = '.error{ border:1px #FF9900 solid; background:#FFFFFF; }';
			sprop += '.Errortext{ color:#000000;font-family:"Trebuchet MS"; 

font-size:11px; }';
			sprop += '.DivErrortext{ border:1px solid #ccc;margin:4px; padding:5px; 

background:lightyellow; color:#666666;font-family:"Trebuchet MS"; font-size:11px; }';
		style.setAttribute("type", "text/css");
		if (style.styleSheet){   // for IE
			style.styleSheet.cssText = sprop;
		} else {
			var newStyle = document.createTextNode(sprop);
			style.appendChild(newStyle);
		}
		document.getElementsByTagName('head')[0].appendChild(style);
		styleAdded = true; //don't add again.
	}
	///////////
	//Checking for mail validation
	var checkmail = function(email){
		var splitted = email.match("^(.+)@(.+)$");
			if(splitted == null) return false;
			if(splitted[1] != null )   {
				var regexp_user=/^\"?[\w-_\.]*\"?$/;
				if(splitted[1].match(regexp_user) == null) return false;  
			}
			if(splitted[2] != null)  {
				var regexp_domain=/^[\w-\.]*\.[A-Za-z]{2,4}$/;
				if(splitted[2].match(regexp_domain) == null) {
					var regexp_ip 

=/^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/;
					if(splitted[2].match(regexp_ip) == null) return 

false; 
				}
				return true; 
			}
		return false;
	}
	var warned = false;
	//////////////
	// Function to run onsubmit;
	var onSubmit = function(elem){
		errored = false;
		var form = document.forms[elem];
		for(var node = 0;node < form.length; node++)
			if((""+form[node].onblur).match("validate"))
				form[node].onblur();
		if(errored){
			if(!warned){
				var inputs = form.getElementsByTagName('input');
				for(var x =0; x< inputs.length; x++){
					if(inputs[x].type == 'submit'){
						var errdiv = document.createElement('div');
						errdiv.className = 'DivErrortext';
						errdiv.innerHTML = 'There are missing fields on your form please 

correct them.';
						inputs[x].parentNode.appendChild(errdiv);
					}
				}
				warned = true;
			}
			pageBreak.goErrorPage();
			return false;
		}	
		else form.submit();
	}
	
	//////////////
	// Function to set error messages
	var getMsg = function(type){
		switch(type){
			case "LessThan":		   return "This field's length should be 

less than (" + option['LessThan'] + ")"
			case "GreaterThan":		return "This field's length should be 

greater than (" + option['GreaterThan'] + ")"
			case "Alphabetic":		 return "Cannot contain non-alphabetic 

characters."
			case "RequiredAlphabetic": return "Favor preencher o campo."
			case "Numeric":			return "Cannot contain non-numeric 

characters."
			case "RequiredNumeric":	return "This field is required and cannot 

contain non-numeric characters."
			case "Email":			  return "Digite um e-mail v&aacute;lido."
			case "Required":		   return "This field is required."
			case "confirm":			return "Values should match each other"
			case "Regex":			  return "This entry does not match (" + 

option + ")."
			default:				   return "Undefined Error Message"
		}
	}
	
	/////////////
	// Function to check is error printed?
	var checkForErrorDiv = function(elem){
		for(var node = 0;node < elem.parentNode.childNodes.length; node++)
			if(elem.parentNode.childNodes[node].className == "Errortext")
				return true;
		return false;
	}
	
	/////////////
	// Function to define errors and print messages
	var error = function(elem, type, message){
		correct(elem);
		if(!checkForErrorDiv(elem)){
			div = document.createElement("div");
			div.innerHTML = (message)? message : getMsg(type);
			div.className = "Errortext";
			elem.parentNode.appendChild(div);
			//elem.parentNode.insertBefore(div, elem.nextSibling);
		}
		if(elem.className != "error")
			exClassName[elem.name] = elem.className;
		if(elem.type != "checkbox" && elem.type != "radio"){
			elem.className = "error";
		}
		errored = true;
		return true;
	}
	
	/////////////
	// Function to revert Errored fields
	var correct = function(elem){
		var parent = elem.parentNode;
		for(x = 0; x < parent.childNodes.length; x++){
			var node = parent.childNodes[x];
			if(node){
				if(node.className == "Errortext")
					node.parentNode.removeChild(node);
				if(node.className == "error")
					node.className = exClassName[node.name];
			}
		}
	}
	
	///////////////
	// Check for optional validations
	if(option['LessThan']){
		if(elem.value.length >= option['LessThan']){
			error(elem,"LessThan",option['message']);
			return false;
		}else
			correct(elem);
	}
	if(option['GreaterThan']){
		if(elem.value.length <= option['GreaterThan']){
			error(elem,"GreaterThan", option['message']);
			return false;
		}else
			correct(elem);
	}
	if(option.confirm){
		if(elem.value.toLowerCase() != $jt(option.confirm).value.toLowerCase()){
			error(elem, "confirm", option['message']);
			error($jt(option.confirm), "confirm", option['message']);
			return false;
		}else{
			correct(elem);
			correct($jt(option.confirm));
		}
			
	}
		
	//////////////
	// Make all the validations
	switch(type){
		case "Alphabetic":
			var charpos = elem.value.search(/[^a-zA-Z\s\-\_\']/);
			if(charpos >= 0) error(elem,type,option['message']); else 

correct(elem);
			break;
		case "RequiredAlphabetic":
			if(elem.value.length <= 0) error(elem,type,option['message']); 
			else{
				var charpos = elem.value.search(/[^a-zA-Z\s\-\_\']/);
				if(charpos >= 0) error(elem,type,option['message']); else 

correct(elem);
			}
			break;
		case "Numeric":
			var charpos = elem.value.search(/[^0-9\.\,\s\-\_]/);
			if(charpos >= 0) error(elem,type,option['message']); else 

correct(elem);
			break;
		case "RequiredNumeric":
			if(elem.value.length <= 0) error(elem,type,option['message']); 
			else{
				var charpos = elem.value.search(/[^0-9\.\,\s\-\_]/);
				if(charpos >= 0) error(elem,type,option['message']); else 

correct(elem);
			}
			break;
		case "Email":
			if(!checkmail(elem.value)) error(elem,type,option['message']); else 

correct(elem);
			break;
		case "Required":
			if(elem.type == "checkbox" || elem.type == "radio"){
				var parent = elem.parentNode;
				var ok = false;
				for(x = 0; x < parent.childNodes.length; x++)
					if(parent.childNodes[x].checked == true)
						ok = true;
				if(ok) correct(elem,true); else 

error(elem,type,option['message']);
			}else{
				if(elem.options)	
					// Here can be edited for checking text to "Please 

Select one" or similar text
					// in this example it looks for blank <option> to 

give error
					if(elem.options[elem.selectedIndex].text.length <= 

0) error(elem,type,option['message']); else correct(elem);
				else
					if(elem.value.length <= 0) 

error(elem,type,option['message']); else correct(elem);
			}
			break;
		case "Regex":
			if(elem.value.match(option['expression'])) correct(elem);
			else error(elem,type,option['message']);
			break;
		default:	// Default is for defining the form and setting onsubmit 

function
			var form = document.forms[elem]
			form.onsubmit = function(){ onSubmit(elem); return false; };
			break;
	}		
}

function pageBreak(){
	// the object properties
	this.form;
	this.pages;
	this.pageIndex;
	this.pageLength;
	
	// The form objects.
	this.setInitialStatus = setInitialStatus;
	this.goErrorPage = goErrorPage;
	this.goPage = goPage;
	this.controlCurrentPage = controlCurrentPage;
	
	// function for getting properties	
	/**
	 * Get the form objects with the
	 * name form name
	 */
	function getForm(formName){
		return document.forms.formName;
	}
	
	/**
	 * Get the divs
	 */
	function getPages(){
		var temp = new Array();
		var mainDiv = document.getElementById("main");
		if (typeof(mainDiv) == null) {
			alert("Cannot find the main div.");
		}
		for (var i = 0; i < mainDiv.childNodes.length; i++) {
			if (mainDiv.childNodes[i].className == "pagebreak") {
				temp.push(mainDiv.childNodes[i]);
			}
		}
		return temp;
	}
	
	// methods..
	/**
	 * Set the initial status of the
	 * divs.
	 */
	function setInitialStatus(){
		this.form = getForm(this.formName);
		this.pages = getPages();
		this.pageIndex = 0;
		this.pageLength = this.pages.length;
		hidePages(this);
		setButtons(this);
	}
	
	function hidePages(pageBreak){
		for (var i = 0; i < pageBreak.pages.length; i++) {
			if (i != 0) {
				pageBreak.pages[i].style.display = "none";
			}
		}
	}
	
	function setButtons(pageBreak){
		for (var i = 0; i < pageBreak.pages.length; i++) {
			for (var j = 0; j < pageBreak.pages[i].childNodes.length; j++) {
				if (pageBreak.pages[i].childNodes[j].nodeName == "TABLE") {
					var table = pageBreak.pages[i].childNodes[j];
					var rows = table.getElementsByTagName('tr');
					if (rows.length<1){
						continue;
					}
					var lastRow = rows[rows.length-1];
					var myCells = lastRow.getElementsByTagName('td');
					var myCell = myCells[0];
					if (!lastRowButton(table) || i != 

(pageBreak.pageLength - 1)) {
						var myRow = table.insertRow(-1);
						var myCell = myRow.insertCell(-1);
						var myCell2 = myRow.insertCell(-1);
					}
					if (i != 0) {
						var backButton = 

document.createElement("div");
						backButton.className = "backButton";
						backButton.onclick = function(){
							goBackPage(pageBreak);
						};
						myCell.appendChild(backButton);
					}
					if (i != pageBreak.pageLength - 1) {
						var nextButton = 

document.createElement("div");
						nextButton.className = "nextButton";
						nextButton.onclick = function(){
							goNextPage(pageBreak);
						};
						myCell2.appendChild(nextButton);
					}
				} // if element is table
			} // look for all elements in page
		} // look for all pages
	} // end of function
	function goNextPage(pageBreak){
		if (pageBreak.controlCurrentPage() == false){
			scrollTo(obtenerPosicionX(document.getElementById('main')), 

obtenerPosicionY(document.getElementById('main')))
			return;
		}
		scrollTo(obtenerPosicionX(document.getElementById('main')), 

obtenerPosicionY(document.getElementById('main')))
		pageBreak.pages[pageBreak.pageIndex].style.display = "none";
		pageBreak.pageIndex++;
		pageBreak.pages[pageBreak.pageIndex].style.display = "block";
	}
	
	function goBackPage(pageBreak){
		scrollTo(obtenerPosicionX(document.getElementById('main')), 

obtenerPosicionY(document.getElementById('main')))
		pageBreak.pages[pageBreak.pageIndex].style.display = "none";
		pageBreak.pageIndex--;
		pageBreak.pages[pageBreak.pageIndex].style.display = "block";
	}
	
	//Get X position
	function obtenerPosicionX(elemento){
		var x = 0;
		while (elemento) {
			x += elemento.offsetLeft;
			elemento = elemento.offsetParent;
		}
		return x;
	}
	
	//Get Y position
	function obtenerPosicionY(elemento){
		var y = 0;
		while (elemento) {
			y += elemento.offsetTop;
			elemento = elemento.offsetParent;
		}
		return y;
	}
	
	function goErrorPage(){
		for (var i = 0; i < this.pageLength; i++) {
			var div = this.pages[i];
			var inputs = div.getElementsByTagName('input');
			for (var j = 0; j < inputs.length; j++) {
				var className = inputs[j].className;
				if (className.search(/error/) != -1) {
					this.goPage(i);
					return;
				}
			}
		}
	}
	
	function goPage(index){
		this.pages[this.pageIndex].style.display = 'none';
		this.pages[index].style.display = 'block';
		this.pageIndex = index;
	}
	
	function lastRowButton(table){
		var inputs = table.getElementsByTagName('input');
		if (inputs.length<1){
			return false;
		}
		var lastRowInput = inputs[inputs.length - 1];
		if (lastRowInput.type == 'submit') {
			return true;
		}
		return false;
	}
	
	function controlCurrentPage(){
		var div = this.pages[this.pageIndex];
		var inputs = div.getElementsByTagName('input');
		// fire all validation events
		for (var i=0; i<inputs.length; i++){
			fireHTMLEvent(inputs[i],"onblur");
			var className = inputs[i].className;
			if (className.search(/error/) != -1) {
				return false;
			}
		}
		return true;
	}
	
	function fireHTMLEvent(obj, eventType){
		if (typeof obj.fireEvent != "undefined") 
			obj.fireEvent(/^on/.test(eventType) ? eventType : "on" + eventType);
		else {
			var evt = document.createEvent("HTMLEvents");
			evt.initEvent(eventType.replace(/^on/, ""), true, true);
			obj.dispatchEvent(evt);
		}
	}
}


#3 dvdpausini

dvdpausini

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Masculino
  • Localidade:SAMPA

Posted 18/03/2009, 14:47

Po vlw pela atençao!!

Entao eu peguei o JS ate consegui editar as cores e tals.. so q seguinte: ESSE FORMULARIO EU GEREI NUM SITE GRATUITO, porem para ser enviado pra mim chega com a LOGO deles no email, e nao posso utilizar isso com um cliente.

Eu subtitui um arquivo.PHP q tenho aki pra envio da mensagem, só que a mensagem chega no meu mail, porem sem os dados q preenchi.

Ou seja o axo q ta faltandno configurar a parte do PHP pois o arquivo que esta nesse arquivo ORIGINAL é um direçao do HOST desse site que gerou esse formulario..

Se puder me dar uma LUZ eu agradeço.

Vlw

EXEMPLIFICANDO O QUE CITEI ACIMA:


CODIGO ALTERADO POR MIM DENTRO DO HTML, ENVIA O EMAIL, POREM NAO CHEGA COM OS DADOS DO CAMPO PREENCHIDO.<form enctype="multipart/form-data" action="form3.php" method="post" name="form3">


CODIGO ORIGINAL DO ARQUIVO QUE ENVIA OS DADOS DO FORMULARIO MAS ATRAVES DO SITE (www.jotform.com)<form enctype="multipart/form-data" action="http://www.jotform.c...com/submit.php" method="post" name="q_form_90761534621">

#4 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 18/03/2009, 17:16

É isso mesmo, voce vai ter que configurar um arquivo em php para o envio das informações, pois o dele é pelo servidor deles.

Se voce postar o code ai nós poderemos ajudar.

#5 dvdpausini

dvdpausini

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Masculino
  • Localidade:SAMPA

Posted 20/03/2009, 09:00

Oi Kahor nao sei como colocar o codigo aqui mas vou deixar os links

ARQUIVO ORIGINAL: http://www.midpublic...m.br/form3.html (dentro desse do FORM tem o codigo ACTION para direcionar para o site o envio usando o .PHP)

ARQUIVO ALTERADO: http://www.midpublic...om.br/form.html (na parte do FORM em ACTION eu alterei para o meu .PHP mas nao funfou. axei q fosse isso, por isso pedi ajuda aki)

JS: http://www.midpublic...orm.js?v2.0.858

Edição feita por: dvdpausini, 20/03/2009, 09:01.


#6 dvdpausini

dvdpausini

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Masculino
  • Localidade:SAMPA

Posted 23/03/2009, 10:55

O TOPICO FOI MOVIDO PRA AONDE? NAO SEI COMO AXA-LO

#7 giselelm

giselelm

    12 Horas

  • Usuários
  • 173 posts
  • Sexo:Feminino
  • Localidade:Curitiba

Posted 30/03/2009, 17:49

Gostaria de incluir um padrão para telefone (99) 9999-9999 ou data dd/mm/aaaa

Assim como ele verifica se o email é valido, verificasse se o telefone ou data estão preenchidas no padrão

Como posso fazer, continuando neste padrão?




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq