Originariamente inviato da djcaipiroska
Ok, dunque, volevo chiederti se mi spiegavi la verifica di cui hai parlato nelle ultime righe del topic precedente:
"Ricorda che è sempre consigliato ripetere i controllo lato server, perché altrimenti ti sfuggirebbero i dati inseriti su client dove javascript non è attivo."
____cioè?
Il controllo dell'obbligatorietà dei campi viene effettuato lato client.
Se l'utente che compila la form ha javascript disattivato, il controllo viene saltato, come se tutti i dati fossero ok.
Per cui lato server devi ricontrollare che ti siano realmente arrivati tutti i valori.
Se stai scrivendo un'applicazione che girerà su una intranet aziendale, dove l'attivazione di javascript è un presupposto fondamentale perché funzioni tutto, allora il controllo lato server non ti serve(r).
Originariamente inviato da djcaipiroska
L'altra cosa è diciamo che alla fin fine mi va bene anche solo il codice che hai messo nel primo topic? in effetti ci ho pensato e non mi serve tanto rendere obbligatori i check e i radio e ne tanto meno i select, anche perchè sono opzionali. Al cliente interessano soprattutto i testi. Quindi basta che metto solo quello di su????
Troppo tardi, mi sono intrippato. 
Originariamente inviato da djcaipiroska
E poi, per l'avviso dove lo metto il testo? Si puo' mettere una popup di alert?
Nel codice che posterò puoi scegliere tra un alert e un elemento (span, div, label, hx, ...) della pagina. Comunque in quello che ho postato prima è in un alert.
Originariamente inviato da djcaipiroska
E per concludere, come faccio a dirgli "se è tutto compilato vai alla pagina GRAZIE.htm"?
La pagina è scritta nella action della form, ti conviene lasciarla lì e non inserirla nello script, per il discorso di prima su javascript disattivato.
Originariamente inviato da djcaipiroska
sei gentilissimo o issima...
issimo, credo, 'spe che controllo... si, si, issimo issimo.
Questo è quello che ho combinato.
Stavo pensando di parametrizzare l'obbligatorietà dei campi con l'aggiunta di un attributo nel markup, di gestire l'inserimento di campi solo numerici, solo alfanumerici, maschere per gli indirizzi email, le date... Mi sono imposto di smetterla perché so che sto scrivendo cose già scritte da altri.
Qui mi fermo:
codice:
<html>
<head>
<style type="text/css">
#errore {
color: red;
font-weight: bold;
border: 2px solid red;
visibility: hidden;
padding: 2px 10px;
}
</style>
<script type="text/javascript">
//flag che indica la presenza del tag con id=errore
// atto a contenere i messaggi di errore della routine di controllo
//Se impostato a false o se il tag non è presente, i messaggi vengono visualizzati tramite alert.
var flTagErrore = true;
function resetMessaggio () {
document.getElementById("errore").style.visibility = "hidden";
}
window.onload = function init () {
//Funzione di inizializzazione degli elementi della form (solo se l'errore è da visualizzare nell'apposito tag)
//Viene disattivato il messaggio di errore
// sull'onblur di tutti gli elementi
// sugli eventi che determinano la variazione dei specifici campi
//Si poteva anche impostare l'onkeypress e l'onclick di tutti
// gli elementi, senza nessuno switch, ma me ne sono reso conto solo alla fine.
//*******************************************
//Form da controllare.
//Se nel codice non è presente l'id (o non è uguale a quello scritto qui sotto)
// nella form il controllo viene fatto comunque, ma non è possibile utilizzare il tag "errore" per i messaggi
//*******************************************
var oForm = document.getElementById("f1");
//Si verifica la possibilità di utilizzare il tag di errore
//Se abilitato, se presente il tag con id="errore", se presente la form si prosegue, altrimenti si usa l'alert
if (!flTagErrore && !document.getElementById("errore") && !oForm) {
flTagErrore = false;
return false;
}
var cllcElem = oForm.elements; //collection degli elementi della form
for (var i=0; i<cllcElem.length; i++) {
cllcElem[i].onblur = resetMessaggio;
switch (cllcElem[i].tagName.toLowerCase()) {
case "select":
cllcElem[i].onkeypress = resetMessaggio;
break;
case "input":
cllcElem[i].onblur = resetMessaggio;
switch (cllcElem[i].getAttribute("type").toLowerCase()) {
case "text":
case "password":
cllcElem[i].onkeypress = resetMessaggio;
break;
case "radio":
cllcElem[i].onclick = resetMessaggio;
break;
}
break;
case "textarea":
cllcElem[i].onkeypress = resetMessaggio;
break;
}
}
}
function errore(oElem, pMessaggio) {
//Viene dato il focus all'elemento passato e viene visualizzato il messaggio
oElem.focus();
if (flTagErrore) {
document.getElementById("errore").innerHTML = pMessaggio;
document.getElementById("errore").style.visibility = "visible";
}
else
alert(pMessaggio);
return false;
}
function controllaTesti(pForm) {
var cllcElem = pForm.elements; //collection degli elementi della form
var i, j;
var flChecked;
var radioOk = new Array;
for (i=0; i<cllcElem.length; i++) {
switch (cllcElem[i].tagName.toLowerCase()) {
case "select":
if (cllcElem[i].value == "") {
if (cllcElem[i].getAttribute("multiple") == "multiple" || cllcElem[i].getAttribute("multiple") == "true")
return errore(cllcElem[i], "E' obbligatorio selezionare almeno un valore!");
else
return errore(cllcElem[i], "E' obbligatorio selezionare un valore!");
}
break;
case "input":
switch (cllcElem[i].getAttribute("type").toLowerCase()) {
case "text":
case "password":
if (cllcElem[i].value.replace(/\s+$|^\s+/g,"") == "") //Se il valore trimmato è vuoto si blocca il submit
return errore(cllcElem[i], "Campo " + cllcElem[i].getAttribute("name") + " obbligatorio!");
break;
case "radio":
if (!isControllato(radioOk, cllcElem[i].getAttribute("name"))) {
//Se il radio non è già stato controllato si procede con la verifica
flChecked = false; //default
//Si controllano tutti i successivi elementi della form
//Se non è stato selezionato nemmeno un elemento del radio si avverte l'utente
for (j=i; j<cllcElem.length; j++) {
if ((cllcElem[j].tagName.toLowerCase() == "input") && (cllcElem[j].getAttribute("type").toLowerCase() == "radio")) {
if (cllcElem[j].getAttribute("name") == cllcElem[i].getAttribute("name")) {
if (cllcElem[j].checked) {
flChecked = true;
break;
}
}
}
}
if (!flChecked)
return errore(cllcElem[i], "Effettuare una selezione!");
else
radioOk.push(cllcElem[i].getAttribute("name")); //Si scrive il nome in un array per non ricontrollarlo sui successivi elementi
}
break;
case "checkbox":
break;
}
break;
case "textarea":
if (cllcElem[i].value.replace(/\s+$|^\s+/g,"") == "") //Se il valore trimmato è vuoto si blocca il submit
return errore(cllcElem[i], "Campo " + cllcElem[i].getAttribute("name") + " obbligatorio!");
break;
}
}
//Viene ritornato true solo se tutti i campi sono stati valorizzati
return true;
}
function isControllato (oArray, pNome) {
//Funzione che controlla se il nome è già presente nell'array dei radio controllati
for (i=0; i<oArray.length; i++) {
if (oArray[i] == pNome)
return true;
}
return false;
}
</script>
</head>
<body>
<form id="f1" action="pagina.php" onsubmit="return controllaTesti(this);">
<input name="i1" type="text" />
<input name="i2" type="text" />
<input name="i3" type="text" />
<input name="i4" type="checkbox" />
<input name="i5" type="text" />
<input name="i6" type="radio" value="1" />
<input name="i6" type="radio" value="2" />
<input name="i7" type="text" />
<input name="i6" type="radio" value="3" />
<input name="i8" type="text" />
<input name="i9" type="password" />
<input name="i10" type="hidden" />
<input name="i11" type="button" />
<textarea name="t1"></textarea>
<textarea name="t2"></textarea>
<select name="s1">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s2" multiple="multiple">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" />
</form>
<span id="errore"></span>
</body>
</html>
Rispondi quotando
