Ciao ragazzi,
vorrei usare due eventi onblur su una form che eseguono
1) Controllo sintattico su input e modifica colore del div --> http://www.extrowebsite.com/lab/arti...focus_form.htm
2) Inserimento di un messaggio per ogni input --> http://www.askthecssguy.com/examples...example06.html
Con il codice che posto di seguito, funziona il punto 1), se tolgo il codice presente dopo la scritta "Cancella da qui fino a prima di ..."
Chiaramente questo dipende dall'essere poco pratico con javascript e sicuramente mi sfugge qualcosa, anche di banale.
Mi potete dare qualche suggerimento?
(il problema di allineamento CSS al momento non e' importante)
Grazie in anticipo
QUi il codice html/javascript
e questo il CSS per visualizzare meglio l'esempioCodice PHP:<!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" xml:lang="it" lang="it" dir="ltr">
<head>
<title>Stato :focus su elementi form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url(stile.css);
</style>
<script type="text/javascript"><![CDATA[//><!--
function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)
//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}
function sel(id) {
if (!document.getElementById) return;
selDiv = document.getElementById(id);
selDiv.style.backgroundColor = "#fff";
selDiv.style.borderColor = "black";
}
function des(id,valore) {
if (!document.getElementById) return;
if (valore.value!=""){
// ParteMia: A seconda del nome del campo occorre
// fare diversi controlli
// La seguente if e' di esempio
if (valore.name=="emai"){
//alert(valore.name);
}
enteroValidado = validarEntero(valore.value)
if (enteroValidado == ""){
selDiv = document.getElementById(id);
selDiv.style.borderColor = "red";
selDiv.style.backgroundColor = "#fff";
}else{
// ParteMia: Nel caso che il valore e' corretto
// cambio il colore del bordo
selDiv.style.borderColor = "green";
selDiv.style.backgroundColor = "#fff";
}
}
else{
// ParteMia: Questo serve per ripristinare il bordo normale di un input
// nel caso in cui il precedente e' da correggere
// togliendo questo succede che rimane il bordo evidenziato in nero come
// se si sta per scrivere
selDiv.style.borderColor = "#73848C";
}
}
function check_form(f){
var msg="Attenzione! Sono stati rilevati i seguenti errori:\n";
var email_pattern=/^\w+@([\w.])+\w+$/;
var error=false;
if(f.nome.value=="") {
msg=msg+"\n Campo nome obbligatorio.";
error=true;
}
else if (isNaN(f.nome.value)) {
msg=msg+"\n Il campo deve essere numerico.";
error=true;
}
if(f.emai.value=="") {
msg=msg+"\n Campo email obbligatorio.";
error=true;
}
else if(!email_pattern.test(f.emai.value)){
msg=msg+"\n Campo e-mail non corretto.";
error=true;
}
if(error){
window.alert(msg);
return false;
}
else{
}
}
// CANCELLARE DA QUI FINO A </SCRIPT>
// per far funzionare il primo onblur
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
if (selects[k].parentNode.getElementsByTagName("span")[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
addLoadEvent(prepareInputsForHints);
//--><!]]>
</script>
</head>
<body>
<form action="" name="form" id="form" method="post" onsubmit="return(check_form(this))">
<dl>
<dt>
<label for="n">First Name:</label>
</dt>
<dd>
<input type="text" name="nome" id="n" value="" onfocus="sel('n')" onblur="des('n',this)" title="Inserisci il nome" />
<span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"></span></span>
</dd>
<dt>
<label for="c">Last Name:</label>
</dt>
<dd>
<input type="text" name="cogn" id="c" value="" onfocus="sel('c')" onblur="des('c',this)" title="Inserisci il cognome" />
<span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"></span></span>
</dd>
<dt>
<label for="e">Email:</label>
</dt>
<dd>
<input type="text" name="emai" id="e" value="" onfocus="sel('e')" onblur="des('e',this)" title="Inserisci la mail" /></p>
<span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"></span></span>
</dd>
<dd>
<input type="submit" name="Invia" id="Invia" value="Registra" />
</dd>
</dl>
</form>
</body>
</html>
Codice PHP:body {
margin:0;
padding:0;
font-family: 'trebuchet ms', trebuchet, arial, verdana, helvetica, sans-serif;
font-size: 90%;
text-align: center;
}
h1 {
margin:0;
padding: 20px;
font-size: 1.8em;
color: #f90;
}
h2{
margin:0;
padding: 0 0 10px 0 ;
font-size: 1.4em;
color: #f90;
}
form {
width:700px;
border:0px
padding:5px;
margin:0 auto;
}
input {
font-weight: bold;
width:300px;
height:21px;
font-family: 'trebuchet ms', trebuchet, arial, verdana, helvetica, sans-serif;
letter-spacing: .1em;
border:#73848C 2px solid;
padding:0;
}
textarea{
font-weight:bold;
font-size:13px;
font-family: 'trebuchet ms', trebuchet, arial, verdana, helvetica, sans-serif;
letter-spacing: .1em;
width:300px;
border:#73848C 2px solid;
padding:0px 0px 0px 2px;
}
/* All form elements are within the definition list for this example */
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 130px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}
/* The hint to Hide and Show */
.hint {
display: none;
position: absolute;
right: -250px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
/* to fix IE6, I can't just declare a background-color,
I must do a bg image, too! So I'm duplicating the pointer.gif
image, and positioning it so that it doesn't show up
within the box */
background: #ffc url(pointer.gif) no-repeat -10px 5px;
}
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(pointer.gif) left top no-repeat;
}
Rispondi quotando
