[Javascript] Validazione che non funziona

[lucas72]

Ciao,
dopo tanto tempo ho pensato di riprendere a costruire semplici pagine web, ma ho dimenticato un po' tutto quindi all'inizio provo a modificare dei file che trovo in rete.
Non riesco a capire perché il codice javascript non mi valida il contenuto del form (in cui di proposito inserisco dati errati) e passa subito ad inviare i dati allo script PHP addcustomer.php.

Questo il codice del file validatesignup.php con il modulo per la registrazione:

<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="checkform.js"></script>
</head>
<body>
  	<form action="addcustomer.php" method="post" onsubmit="return validate(this);">
		<table border="0" cellspacing="1" cellpadding="3">
			<tr><td colspan="2" align="center">Enter your information</td></tr>
  			<tr><td>Email Address: </td><td> <input size="20" type="text" name="emailaddress" > <span id="emailmsg"></span></td></tr>
  			<tr><td>Password: </td><td>  <input size="20" type="password" name="password" ><span id="passwdmsg"></span></td></tr>
  			<tr><td>ReType Password:  </td><td> <input size="20" type="password" name="repassword"><span id="repasswdmsg"></span></td></tr>
  			<tr><td>Complete Name  </td><td> <input size="50" type="text" name="complete_name" ><span id="usrmsg"></span></td></tr>
   			<tr><td>Address:  </td><td> <input size="80" type="text" name="address1"></td></tr>
  			<tr><td></td><td> <input size="80" type="text" name="address2"></td></tr>
  			<tr><td>City:  </td><td> <input size="30" type="text" name="city"></td></tr>
  			<tr><td>State:  </td><td> <input size="30" type="text" name="state"></td></tr>
 			<tr><td>Country:  </td><td> <input size="30" type="text" name="country"></td></tr>
  			<tr><td>Zip Code:  </td><td> <input size="20" type="text" name="zipcode"></td></tr>
    			<tr><td>Phone No:  </td><td> <input size="30" type="text" name="phone_no"></td></tr>
  			<tr><td><input type="submit" name="submit" value="Submit"> </td><td> 
    			<input type="reset" value="Cancel"></td></tr>
		</table>
  	</form>
</body>
</html>

questo il file javascript checkform.js richiamato per il controllo:

function validate(userForm) {
	div=document.getElementById("emailmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	regex=/(^\w+\@\w+\.\w+)/;
	match=regex.exec(userForm.emailaddress.value);
	if(!match)
	{
		div.appendChild(document.createTextNode("Invalid Email"));
		userForm.emailaddress.focus();
		return false;
	}
	div=document.getElementById("passwdmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	if(userForm.password.value.length <=5)
	{
		div.appendChild(document.createTextNode("The password should be of at least size 6"));
		userForm.password.focus();
		return false;
	}
	div=document.getElementById("repasswdmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	if(userForm.password.value != userForm.repassword.value)
	{
		div.appendChild(document.createTextNode("The two passwords don't match"));
		userForm.password.focus();
		return false;
	}
 	var div=document.getElementById("usrmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	if(userForm.complete_name.value.length ==0)
	{
		div.appendChild(document.createTextNode("Name cannot be blank"));
		userForm.complete_name.focus();
		return false;
	}
	return true;
}

In pratica è come se il codice JS non esistesse. Potete aiutarmi a capire cosa non va?
Grazie

[wingman87]

Ho messo il tuo codice in un jsfiddle:
https://jsfiddle.net/3a3bm1ra/1/

Cliccando su submit compare il messaggio di errore a fianco all'email.
Può essere che hai referenziato male il js? Si trova nella stessa cartella di validatesignup.php?

[lucas72]

Originariamente inviato da wingman87

Ho messo il tuo codice in un jsfiddle:
https://jsfiddle.net/3a3bm1ra/1/

Cliccando su submit compare il messaggio di errore a fianco all'email.
Può essere che hai referenziato male il js? Si trova nella stessa cartella di validatesignup.php?

Scusami, ma sto impazzendo. Apro il tuo link con il codice e tutto funziona.
Riprovo io copiando lo stesso codice, avvio "run" e mi ritrovo con questo messaggio di errore:

Error 404

We're truly sorry, but there is no such page.


Si il js si trova nella stessa cartella.

Grazie


ps: Non ci posso credere!! Ho copiato e incollato il codice da te linkato e l'ho...."sostituito" con il vecchio e adesso funziona. Sicuro che non hai fatto qualche modifica?

[wingman87]

Su jsfiddle ho dovuto impostare il "Load type" a No wrap. Per trovare questa impostazione clicca sulla rotellina a fianco della scritta Javascript. Se non metti quella impostazione la funzione non viene definita nello scope globale e quindi risulta invisibile per il form che quindi procede con il submit. Il codice mi sembra che l'ho copiato senza modificarlo ma domani verifico, ora mi viene difficile farlo dal telefono.

Inviato dal mio F5121 utilizzando Tapatalk

[lucas72]

Originariamente inviato da wingman87

Su jsfiddle ho dovuto impostare il "Load type" a No wrap. Per trovare questa impostazione clicca sulla rotellina a fianco della scritta Javascript. Se non metti quella impostazione la funzione non viene definita nello scope globale e quindi risulta invisibile per il form che quindi procede con il submit. Il codice mi sembra che l'ho copiato senza modificarlo ma domani verifico, ora mi viene difficile farlo dal telefono.

Inviato dal mio F5121 utilizzando Tapatalk

ok grazie

[wingman87]

Scusa l'attesa. Ho verificato e non ho modificato nulla.
La differenza tra i tuoi file e il jsfiddle è come viene incluso il javascript. Su jsfiddle è incluso nella stessa pagina dentro un tag script. Tu hai incluso il js così:

<script language="JavaScript" type="text/JavaScript" src="checkform.js"></script>

I valore dell'attributo type io l'ho sempre visto tutto minuscolo ma dovrebbe essere case insensitive (e language è inutile). Non so se il browser che stai usando sia così pignolo da non interpretare correttamente il tag solo per questo motivo... Prova a riscriverlo così

<script type="text/javascript" src="checkform.js"></script>

Se ancora non funziona, tenta di capire cosa succede usando i developer tools del browser (si aprono premendo F12). In particolare guarda se c'è qualche messaggio nella scheda console e poi verifica nella scheda rete che venga richiesto e poi scaricato il file js.

[lucas72]

Originariamente inviato da wingman87

Scusa l'attesa. Ho verificato e non ho modificato nulla.
La differenza tra i tuoi file e il jsfiddle è come viene incluso il javascript. Su jsfiddle è incluso nella stessa pagina dentro un tag script. Tu hai incluso il js così:

<script language="JavaScript" type="text/JavaScript" src="checkform.js"></script>

I valore dell'attributo type io l'ho sempre visto tutto minuscolo ma dovrebbe essere case insensitive (e language è inutile). Non so se il browser che stai usando sia così pignolo da non interpretare correttamente il tag solo per questo motivo... Prova a riscriverlo così

<script type="text/javascript" src="checkform.js"></script>

Se ancora non funziona, tenta di capire cosa succede usando i developer tools del browser (si aprono premendo F12). In particolare guarda se c'è qualche messaggio nella scheda console e poi verifica nella scheda rete che venga richiesto e poi scaricato il file js.

Si, ma come ti dicevo sopra, adesso funziona e ho solo fatto il copia e incolla del codice del tuo link; per questo chiedevo se avessi fatto qualche modifica.
Altrove mi hanno pure suggerito di aggiungere questo:

<form onsubmit="event.preventDefault()....">

Ma non so esattamente cosa faccia.
Grazie

[wingman87]

Originariamente inviato da lucas72

Si, ma come ti dicevo sopra, adesso funziona e ho solo fatto il copia e incolla del codice del tuo link; per questo chiedevo se avessi fatto qualche modifica.

Ah bene non avevo capito! In tal caso probabilmente nel tuo file originale (quello non funzionante) c'era qualche carattere "strano" che è andato perso incollando il codice sul forum. Se ti va di provare puoi copiare il codice del tuo primo post e dovrebbe funzionare (con me ha funzionato).

Originariamente inviato da lucas72

Altrove mi hanno pure suggerito di aggiungere questo:

<form onsubmit="event.preventDefault()....">

Ma non so esattamente cosa faccia.
Grazie

event.preventDefault() cancella l'azione predefinita associata all'evento, in questo caso il submit.