Problema Focus javascript su template HTML5

**andreacivita** · 25-02-2014, 16.39.59

Salve Ragazzi, ho un problema con un form e il suo controllo in javascript.
Ho un form chiamato modulo e tre campi : name, email e message (Serve appunto per inviare l'email).
Lo script utilizzato controlla che le caselle di testo non siano vuote. Nel caso risultino vuote, avvisa l'utente (alert) e posiziona il cursore nella casella (focus). Con tutte le altre pagine funziona, con questa in HTML5 invece esegue l'alert e ricarica la pagina (e cancella le altre 2 caselle di testo "riempite").
attualmente, l'unica differenza che noto è che questa pagina è cosi composta da paragrafi:

Codice HTML:

<html>
<head>
javascript
</head>
<body> 
<section id="a">
<section id="b">
<section id="c">
</body>
</html>

è possibile che questo impedisca al javascript di eseguire il focus senza ricaricare la pagina?
allego il codice javascript e il codice html del modulo.

Codice HTML:

		<script>
<!--
function Modulo()
{

  if(document.modulo.name.value=="") {
  
      alert("Inserisci il Nome e Cognome");
       document.modulo.name.focus();
        return false;
            
      }
 

 else if (document.modulo.email.value=="") {
         alert("Inserisci la tua email");
         document.modulo.email.focus();
        return false;
       }
       
 st = document.modulo.email.value;
 var espressione = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})$");
       if ( !espressione.test(st) ){

          alert("Questa Mail non è valida");
          document.modulo.email.focus()
           return false;
             }
             
              else if (document.modulo.message.value=="") {
         alert("Inserisci un messaggio");
         document.modulo.message.focus();
        return false;
       }

             else {
        document.modulo.action = "mail.php";
        document.modulo.submit();
    }
//---->
  }
</script>


<form name="modulo" method="post">
<div class="row half">
<div class="6u"><input type="text" class="text" name="name" placeholder="Nome e Cognome" /></div>
<div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Messaggio"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<a href="" onClick="Modulo()" class="button submit">Richiedi un Preventivo</a>
</div>
</div>
</form>

Riepilogando, gli alert funzionano bene, l'unica imprecisione è che non esegue il focus, ma ricarica la pagina e tutti i dati inseriti vengono cancellati.

**alemoppo** · 25-02-2014, 16.59.20

Per non far ricaricare la pagina, come href del link metti #, ovvero:

Codice HTML:

<a href="#" onClick="Modulo()" class="button submit">Richiedi un Preventivo</a>

Comunque, senza un input di tipo submit, i dati del form non vengono inviati! (e nel form non c'é nemmeno l'action).

Ciao!

**andreacivita** · 25-02-2014, 17.15.06

no, i dati vengono inviati tranquillamente, perchè quando clicchi sul pulsante prima controlla se i campi sono riempiti, poi li invia alla pagina mail.php tramite il metodo:
document.modulo.action = "mail.php";
document.modulo.submit();
Ho provato a seguire il tuo consiglio, e purtroppo non funziona.
<a href="#" onClick="Modulo()" class="button submit">Richiedi un Preventivo</a>
Cioè, controlla se le caselle sono vuote, se sono tutte piene invia la email (funziona) ma, se uno è vuoto appare l'alert e la pagina viene refreshata (e perdo il valore delle altre caselle).
Grazie comunque per l'aiuto :)

**alemoppo** · 25-02-2014, 17.21.14

Originalmente inviato da andreacivita

no, i dati vengono inviati tranquillamente, perchè quando clicchi sul pulsante prima controlla se i campi sono riempiti, poi li invia alla pagina mail.php tramite il metodo:
document.modulo.action = "mail.php";
document.modulo.submit();

Sarebbe meglio non farlo via javascript, così possono utilizzarlo anche chi non ha javascript attivato/supportato. Cosa ci guadagni a farlo in quel modo?

Ho provato a seguire il tuo consiglio, e purtroppo non funziona.

A me funziona. Hai aggiornato la cache del browser?

Ciao!

**andreacivita** · 25-02-2014, 17.35.31

Ciao, allora intanto uso questo metodo perchè cosi non è possibile inviare i dati finchè non sono stati immessi..altrimenti, se lasciassi senza controllo, chiunque potrebbe cliccare ripetutamente sul tasto di invio e ottengo una valanga di email vuote. Ho provato a pulire la cache, ma, anche da cellulare, noto che prima effettivamente esegue il focus, e poi la pagina viene aggiornata. A te va? :(

**andreacivita** · 25-02-2014, 19.36.54

Allora, sono riuscito a far funzionare tutto, il problema era nel CSS. Consiglio per chi in futuro avrà questo problema o simile, affinchè questo thread possa servire per risolvere questo problema e anche per imparare :)
Il problema in questo caso è che, se il pulsante è di tipo submit, da un refresh della pagina. Il CSS (in questo caso class="button submit") simulava appunto lo stesso comportamento di un bottone submit, e quindi dava il fastidioso problema. La soluzione è utilizzare un pulsante di tipo button (o nel mio caso, un <a href="#nomeparagrafo# class="button">testo</a> che svolgeva lo stesso compito).
In questo modo non si incorre nel refresh della pagina, ma al contrario viene eseguito solo il javascript.
Grazie alemoppo per il tuo aiuto, fa sempre piacere poter contare su qualcuno di più esperto :D

25-02-2014, 19.53.18

Quando alemoppo diceva di non fare i controlli con javascript intendeva di farli tramite php:
javascript è facilmente "bypassabile"

EDIT
Ho guardato il tuo sito, il form per la mail dovresti cambiarlo:
La action la lasci come predefinita (così anche chi non ha js può scriverti, tanto fai anche i controlli php) e la togli all'onload, così che chi ce l'ha attivato veda comunque gli alert

EDIT 2
(Scusate se è ot)
Un consiglio per rallentare un pochino i tempi di caricamento della pagina...
L'icona 42x42 color "arcobaleno" in alto a sinistra è in realtà da 1032 × 774 x 72kb!!!
(450 volta più grande

)

**andreacivita** · 26-02-2014, 00.39.14

Originalmente inviato da tampertools

EDIT
Ho guardato il tuo sito, il form per la mail dovresti cambiarlo:
La action la lasci come predefinita (così anche chi non ha js può scriverti, tanto fai anche i controlli php) e la togli all'onload, così che chi ce l'ha attivato veda comunque gli alert

In che senso la tolgo all'onload? Non ho capito questo pezzo. Inoltre, se lasciassi la action, automaticamente mi rimanderebbe alla pagina php, saltando i controlli lato client...questa cosa dell'onload mi ha incuriosito parecchio

**alemoppo** · 26-02-2014, 01.50.02

Secondo me è meglio una cosa del tipo:

Codice HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ciao</title>
<style type="text/css">
.errore
{
	visibility: hidden;
}
</style>
<script type="text/javascript">
function check()
{
	if(document.nome_form.ciao.value == '')
	{
		document.getElementById('errore1').style.visibility="visible";
		document.nome_form.ciao.focus();
		return false;
	}
	else
		document.getElementById('errore1').style.display="hidden";
	
	//---
	
	var espressione = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})$");
	if ( !espressione.test(document.nome_form.email.value) )
	{
		document.getElementById('errore2').style.visibility="visible";
		document.nome_form.email.focus();
		return false;
	}
	else
		document.getElementById('errore2').style.display="hidden";

	//---
	return true;
}
</script>
</head>
<body>
<form action="pagina.php" method="POST" onSubmit="return check()" name="nome_form">
<input type="text" name="ciao" required><span class="errore" id="errore1">Questo campo deve essere compilato!</span><br>
<input type="text" name="email" required pattern="[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})"><span class="errore" id="errore2">Questo campo deve essere una email!</span><br>
<input type="submit" value="as">
</form>
</body>
</html>

In questo modo, i browser recenti che supportano HTML5 non necessitano di javascript perché vengono usati "required" e "pattern". Per quelli vecchi, li gestisci con javascript (anche se io probabilmente non li metterei proprio).
Non dimenticarti però di fare i veri controlli con PHP! Come ha detto tampertools, queste cose sono facilissimamente aggirabili.

Ciao!

andreacivita · 26-02-2014, 08.25.33

Scusa se mi spiego male

Comunque nella mail anziché il pattern si può anche mettere solo type='email', se le espressioni regolari non ti sono amiche...
Tanto sempre html5 è: chi non supporta uno non supporterebbe neanche l'altro

**andreacivita** · 26-02-2014, 13.47.35

Ho impostato i controlli sia da javascript, sia da php. In questo modo se qualcuno disabilitasse il javascript oppure crei un'altra pagina con lo stesso html, ma che abbia l'action e non richiami la funzione di verifica, non riesce ad inviare comunque la mail. Inoltre voglio inserire una variabile di sessione, che memorizzi un valore dopo che la mail è stata inviata. In questo modo, se l'utente esegue il refresh, la mail non verrà inviata due volte, ma vedrà solo un messaggio di errore. Che dite ragazzuoli, può andar bene o si riesce comunque a bypassare tutti questi controlli? :D
Grazie comunque per la disponibilità :)

**alemoppo** · 26-02-2014, 13.54.52

Dovrebbe andar bene.

Ciao!

Discussione: Problema Focus javascript su template HTML5

LinkBack

Strumenti discussione

Display

Problema Focus javascript su template HTML5

Tags for this Thread

Regole di scrittura