Bloccare email spam

[mzanella]

La funzione emailCampo non è definita, quindi il codice inserito dentro onkeyup non viene eseguito.
Definisci emailCampo, oppure cancellane l'invocazione.

(Quest'errore è mostrato nella console visitando il tuo sito)

Con Firefox non mi dava errore.

Ho modificato il nome della funzione così, ma non va ancora. Non capisco, non sono 3 da definire?

function emailCampo() {
var address = document.forms.mioform1.suoemail.value;
check_email(address, my_callback);
} 

[mzanella]

Nemmeno validaMail e spamMail sono definite.
Rimuovi le loro invocazioni, alla fine il valore di onkeyup dovrà essere qualcosa del genere:

<input
    type="text" name="suoemail" class="campi" value=""
    onkeyup="emailCampo(); contaUser(this); contaEmail();"
    onblur="emailCampo();this.value=ignoreSpaces(this.value)"
>

Non va ancora bene. Io direi, per stare sul semplice, altrimenti non ne vengo più fuori. Siccome i miei script sono funzionali, possiamo lasciarli, io direi di fare il richiamo ajax solo per questo FILTER_VALIDATE_EMAIL

[mzanella]

Guardando sul sito, sembra funzionare.

Ora puoi riprovare, ho ripristinato i miei codici js, è così che dovrebbe funzionare all'onkeyup, però come ti dicevo a me basterebbe ajax solo per FILTER_VALIDATE_EMAIL

Il codice che intercetta il dominio-spam non è ancora perfetto perché se inserisco un carattere qualsiasi appena dopo la chiocciola, l'alert non va via, il codice non intercetta esattamente il dominio, prova con questo: trashmail.me

<script>
function spamMail() {
var f = document.forms.mioform1; 
var xxx = new Array(<?php 
for($i=0;$i<count($blacklist)-1;$i++) echo "'{$blacklist [$i]}',"; 
echo "'{$blacklist [count($blacklist )-1]}'"; 
?>); 
var f = document.forms.mioform1;
   for (var i = 0; i < xxx.length; i++) 
if (f.suoemail.value.indexOf (xxx[i]) != (-1)) {  
document.getElementById('spamMail').innerHTML = "&bull;&nbsp;&nbsp;Questa email non &egrave; accettata";
f.suoemail.focus();
    return false;
   }
    else {
document.getElementById('spamMail').innerHTML = "";
}
   return true;
}
</script>

[mzanella]

Usare AJAX e PHP per realizzare questo tipo di controlli non è difficile, ma richiede una certa scioltezza con entrambi i linguaggi.

Se preferisci usare AJAX per il solo controllo sulla validità dell'indirizzo, il codice PHP diventa:
email_ajax.php:

header('Content-Type: application/json'); 

// Stops if no address is given 
if (!isset($_GET['address'])) { 
    echo json_encode(array("valid" => false));
    return; 
} 

// Stops if address is empty or invalid
$address = $_GET['address'];
if (empty($address) || filter_var($address, FILTER_VALIDATE_EMAIL) === false) {
    echo json_encode(array("valid" => false));
    return; 
}


// Address is valid 
echo json_encode(array("valid" => true)); 

La funzione JavaScript (semplificata) per effettuare il controllo è:

function check_email() {
    var address = document.forms.mioform1.suoemail.value;
    var container = document.getElementById('validaMail');
    
    $.get("email_ajax.php", { "address": address }, function (data) {
        // Address is valid: clears error message
        if (data.valid) {
            container.innerHTML = "";
        }

        // Address is invalid: shows error message
        else {
            container.innerHTML = "•  Inserire un'email valida";
        }
    });
}

check_email andrà poi invocata direttamente da onblur e onkeyup (nota che effettuare il controllo ad ogni pressione di un tasto significa inviare in continuazione richieste durante la digitazione).

Adesso sembra che funziona, questa parte a cosa serve? Io devo validare con js solo esclusivamente questo FILTER_VALIDATE_EMAIL gli altri campi li controllo col metodo che avevo.

// Stops if no address is given  
if (!isset($_GET['address'])) {  
    echo json_encode(array("valid" => false)); 
    return;  
} 

Perché dici che ad ogni digitazione c'è una chiamata? Non va bene?

[mzanella]

Adesso sembra che funziona, questa parte a cosa serve? Io devo validare con js solo esclusivamente questo FILTER_VALIDATE_EMAIL gli altri campi li controllo col metodo che avevo.

Serve quando la pagina viene chiamata per errore senza passarle il parametro nell'URL.
Se dovesse succedere, $_GET['address'] non sarebbe definita, quindi cercare di leggerla produrrebbe in output un errore che invaliderebbe il contenuto del JSON e la funzione JavaScript avrebbe problemi a gestirlo. Una circostanza catastrofica.
Fortunatamente un controllo preventivo con isset risolve tutti i problemi.

Perché dici che ad ogni digitazione c'è una chiamata? Non va bene?

La funzione viene chiamata ad ogni onkeyup, cioè ad ogni rilascio di un tasto, quindi effettua una richiesta al server ogni volta.
Non dovrebbe essere un problema, dovendo maneggiare pochi dati ed avendo una sola invocazione di funzione, ma valeva la pena osservarlo.
Diciamo che, nel caso in cui ci fossero rallentamenti dovuti alla latenza, questa ne sarebbe la causa più probabile.

Ok, ho visto che se inserisco un'email non valida, l'alert esce, ma non mantiene il focus nel campo, cioè, mi fa uscire col cursore.

[mzanella]

Questo è il comportamento standard.
Per forzare lo status di focus negli altri campi stai usando JavaScript? Lo hai applicato anche al campo in questione?

Qui ho messo così ma non prende il focus

function validaMail() {
    var address = document.forms.mioform1.suoemail.value;
    var container = document.getElementById('validaMail');
    
    $.get("email_ajax.php", { "address": address }, function (data) {
        if (data.valid) {
            container.innerHTML = "";
        }
        else {
            container.innerHTML = "•  Inserire un'email valida";
            address.focus();
        }
    });
} 

Poi, ho applicato il codice anche al guestook che si trova in un'altra cartella, perciò ho messo i 2 puntini,
ma non trova email_ajax.php

//Questa funzione richiama il file email_ajax.php
function validaMail() {
    var address = document.forms.mioform1.suoemail.value;
    var container = document.getElementById('validaMail');
    
    $.get("../email_ajax.php", { "address": address }, function (data) {
        if (data.valid) {
            container.innerHTML = "";
        }
        else {
            container.innerHTML = "•  Inserire un'email valida";
        }
    });
} 

[mzanella]

address è una stringa, non un elemento del modulo, non può avere il focus.
Prova a sostituire il ramo else con:

else {
    container.innerHTML = "•  Inserire un'email valida"; 
    document.forms.mioform1.suoemail.focus();
}

Per rispondere anche alla questione del guestbook, devi prima includere jQuery anche in quella pagina (così dice la console degli errori).

L'alert nel guestbook ora è posto. Il focus non funziona

[mzanella]

Allora prova ad impostare il focus ogni qualvolta il campo viene deselezionato (ma solo a condizione che l'email non sia valida):

function validaMail() {
    var input = document.forms.mioform1.suoemail;
    var address = input.value;
    var container = document.getElementById('validaMail');
    
    $.get("../email_ajax.php", { "address": address }, function (data) {
        if (data.valid) {
            container.innerHTML = "";
            input.onblur = function () {}
        }
        else {
            container.innerHTML = "•  Inserire un'email valida";
            input.onblur = function () { input.focus(); }
        }
    });
}

Probabilmente gli utenti non saranno contenti di essere costretti a rimanere in un campo del modulo, e l'usabilità potrebbe risentirne: Rendere JavaScript accessibile - 2.3 onfocus e onblur.

Ora il focus rimane, ma se il campo è vuoto mi escono 2 alert assieme. Cioè, se il campo è vuoto esce:

- Inserire l'email
- Inserire un'email valida

dovrebbe invece uscire solo il primo alert

[mzanella]

Se address è la stringa nulla, non effettuare nessuna chiamata AJAX:

function validaMail() {
    var input = document.forms.mioform1.suoemail;
    var address = input.value;
    var container = document.getElementById('validaMail');

    // Stops if no address was given
    if (address === "") {
        return;
    }
    
    $.get("email_ajax.php", { "address": address }, function (data) {
        if (data.valid) {
            container.innerHTML = "";
            input.onblur = function () {}
        }
        else {
            container.innerHTML = "•  Inserire un'email valida";
            input.onblur = function () { input.focus(); }
        }
    });
}

Ora va meglio, ma c'è ancora una cosa: se inizio a digitare l'email l'alert sparisce, e qui va bene. Se poi col tasto indietro cancello tutti i caratteri, quando il campo è di nuovo vuoto appaiono ancora assieme i 2 alert

[mzanella]

Sembra essere un bug di Mozilla Firefox: il tasto backspace genera un evento keydown, ma non keyup.

Si, difatti con Chrome e Opera va bene. Ancore 2 cosette poi è tutto a posto.

Riguardo al dominio-spam, se inserisco un dominio non accettato (inserito in un array della blacklist), non lo intercetta, cioè, l'alert non se ne va. Nella blacklist il dominio è 163.com

In questi esempi, l'alert dovrebbe sparire perché la parola 163.com è stata alterata.

- se inserisco un qualsiasi carattere appena dopo la chiocciola ...@x163.com
- se inserisco un qualsiasi carattere appena dopo la parte finale es: 163.comx

Dovrebbe invece intercettare solo l'esatto dominio e cioè 163.com e solo se viene alterato, l'alert deve sparire.

<script>
function spamMail() {
var f = document.forms.mioform1; 
var xxx = new Array(<?php 
for($i=0;$i<count($blacklist)-1;$i++) echo "'{$blacklist [$i]}',"; 
echo "'{$blacklist [count($blacklist )-1]}'"; 
?>); 
var f = document.forms.mioform1;
   for (var i = 0; i < xxx.length; i++) 
if (f.suoemail.value.indexOf (xxx[i]) != (-1)) {  
document.getElementById('spamMail').innerHTML = "&bull;&nbsp;&nbsp;Questa email non &egrave; accettata";
f.suoemail.focus();
    return false;
   }
    else {
document.getElementById('spamMail').innerHTML = "";
}
   return true;
}
</script>

[mzanella]

Nella funzione controlli se, nel dominio inserito, compare un dominio proibito come sotto-stringa. Dovresti invece estrarre il dominio dall'indirizzo, e confrontarlo con ogni dominio nella blacklist:

function spamMail() {
    var f = document.forms.mioform1;
    var xxx = new Array(<?php echo implode(", ", $blacklist); ?>);

    var address = f.suomail.value;
    var fields = address.explode("@");

    // If address has no domain, do nothing
    if (fields.length == 0) {
        return true;
    }
    var domain = fields[fields.length -1 ];

    // Stops when encounters a blacklisted domain
    for (var i = 0; i < xxx.length; i++) {
        if (domain == xxx[i]) {
            document.getElementById('spamMail').innerHTML = "&bull;&nbsp;&nbsp;Questa email non &egrave; accettata";
            f.suoemail.focus();
            return false;
        }
    }

    document.getElementById('spamMail').innerHTML = "";
    return true;
}

Strano, ho cambiato il codice e non esce più l'alert :confuse: mi da errore in firefox

[mzanella]

Piccola svista. L'assegnamento a var xxx va corretto così:

var xxx = new Array(<?php echo "'" . implode("', '", $blacklist) . "'"; ?>);

Non va ancora

[mzanella]

    var address = f.suomail.value;

va sostituito con

    var address = f.suoemail.value;

("suoemail" anziché "suomail").

L'alert non esce ancora

function spamMail() {
    var f = document.forms.mioform1;
    var xxx = new Array(<?php echo "'" . implode("', '", $blacklist) . "'"; ?>);
    var address = f.suoemail.value;
    var fields = address.explode("@");

    // If address has no domain, do nothing
    if (fields.length == 0) {
        return true;
    }
    var domain = fields[fields.length -1 ];

    // Stops when encounters a blacklisted domain
    for (var i = 0; i < xxx.length; i++) {
        if (domain == xxx[i]) {
            document.getElementById('spamMail').innerHTML = "&bull;&nbsp;&nbsp;Questa email non &egrave; accettata";
            f.suoemail.focus();
            return false;
        }
    }
   document.getElementById('spamMail').innerHTML = "";
    return true;
}

[mzanella]

function spamMail() { 
    var f = document.forms.mioform1; 
    var xxx = new Array(<?php echo "'" . implode("', '", $blacklist) . "'"; ?>); 
    var address = f.suoemail.value; 
    var fields = address.split("@"); 

    // If address has no domain, do nothing 
    if (fields.length == 0) { 
        return true; 
    } 
    var domain = fields[fields.length -1 ]; 

    // Stops when encounters a blacklisted domain 
    for (var i = 0; i < xxx.length; i++) { 
        if (domain == xxx[i]) { 
            document.getElementById('spamMail').innerHTML = "&bull;&nbsp;&nbsp;Questa email non &egrave; accettata"; 
            f.suoemail.focus(); 
            return false; 
        } 
    } 
   document.getElementById('spamMail').innerHTML = ""; 
    return true; 
}

split anziché explode. Mi spiace per le numerose sviste, ma non ho modo di provare il codice.

Ok, ora è perfetto.

C'è ancora una cosa, sto tentando applicare questo metodo anche al guestbook, al campo url.
Al codice ajax ho pensato di aggiungere FILTER_VALIDATE_URL ma non so se va bene.

<?php
header('Content-Type: application/json');  

// Stops if no address is given  
if (!isset($_GET['address'])) {  
    echo json_encode(array("valid" => false)); 
    return;  
}  

// Stops if address is empty or invalid 
$address = $_GET['address']; 
if (empty($address) || filter_var($address, FILTER_VALIDATE_EMAIL, FILTER_VALIDATE_URL) === false) { 
    echo json_encode(array("valid" => false)); 
    return;  
} 
// Address is valid  
echo json_encode(array("valid" => true));

nel file php ho messo così, alla funzione ho aggiunto la G per non creare conflitto con quella dell'email

//Valida URL (Campo non obbligatorio)
function get_domainG($address) { 
    if (filter_var($address, FILTER_VALIDATE_URL) === false) { 
        return ""; 
    } 
   else {
        $errore .= "&bull;&nbsp;&nbsp;Inserire un URL valido<br><br>"; 
    } 
} 

e nel file.js questo, il campo non è obbligatorio

//Valida URL (Campo non obbligatorio), questa funzione richiama il file email_ajax.php
function validaUrl() {
    var input = document.forms.mioform1.url;
    var address = input.value;
    var container = document.getElementById('validaURL');

    // Stops if no url was given
    if (address === "") {
        return;
    }
    
    $.get("../email_ajax.php", { "address": address }, function (data) {
        if (data.valid) {
            container.innerHTML = "";
            input.onblur = function () {}
        }
        else {
            container.innerHTML = "•  Inserire un URL valido";
            input.onblur = function () { input.focus(); }
        }
    });
} 

E' inutile dire che non funziona, perché si sa, sto facendo tentativi.

[mzanella]

Cercare di riutilizzare il codice è positivo, ma non bisogna abusarne: al momento hai una pagina validate_email.php (o check_mail, o email_ajax, non ricordo come l'hai chiamata) che implementa un controllo di validità sull'email. Svolge un unico ruolo, ed è bene che sia così. Se inizi ad affidarle ulteriori responsabilità (ad esempio la validazione di URL), diventerà più difficile da gestire e mantenere (ed infatti non sta funzionando!).
Questo è il Principio di Singola Responsabilità.

Meglio creare una nuova pagina, validate_url.php con un codice analogo, ma che abbia la sola responsabilità di validare un URL:
validate_url.php

header('Content-Type: application/json');

// Stops if no URL is given
if (!isset($_GET['url'])) {
    echo json_encode(array("valid" => false));
    return;
}

// Stops if URL is empty or invalid
$url = $_GET['url'];
if (empty($url) || filter_var($url, FILTER_VALIDATE_URL) === false) {
    echo json_encode(array("valid" => false));
    return;
}

// URL is valid
echo json_encode(array("valid" => true)); 

nel file php ho messo così, alla funzione ho aggiunto la G per non creare conflitto con quella dell'email

function get_domainG($address) { 
    if (filter_var($address, FILTER_VALIDATE_URL) === false) { 
        return ""; 
    } 
   else {
        $errore .= "&bull;&nbsp;&nbsp;Inserire un URL valido<br><br>"; 
    } 
} 

Qui il problema è di natura concettuale. Hai scritto una funzione get_domainG, il cui nome suggerisce che debba restituire il dominio... di un URL? Gli URL non hanno domini nel senso degli indirizzi email (hanno domini e sotto-domini, ma con un significato differente), quindi questa funzione, semplicemente non ha alcun significato e si può eliminare.
Oltre a questo ha anche altri problemi: hai invertito il contenuto dei rami if ed else (la stringa di errore viene aggiornata quando l'URL è valido), la funzione restituisce la stringa vuota in una caso e niente in un altro, aggiorni la variabile locale $errore senza previa inizializzazione (probabilmente intendevi usare una variabile globale, ma questo è più un problema che una soluzione).


Nel JavaScript, quindi:

function validaUrl() {
    var input = document.forms.mioform1.url;
    var url = input.value;
    var container = document.getElementById('validaURL');

    // Stops if no url was given
    if (url === "") {
        input.onblur = function () {}
        return;
    }
    
    $.get("../validate_url.php", { "url": url }, function (data) {
        if (data.valid) {
            container.innerHTML = "";
            input.onblur = function () {}
        }
        else {
            container.innerHTML = "•  Inserire un URL valido";
            input.onblur = function () { input.focus(); }
        }
    });
}

Potrebbero esserci degli errori sintattici, sempre perché non ho modo di testare il codice.

C'è una cosa che non ho capito: questo è il controllo php che sicuramente va modificato altrimenti non viene intercettato da file url_ajax.php (quello che contiene il json). Come va modificato?

//Valida URL (Campo non obbligatorio)
if ($_POST['url']) {
if (filter_var($url, FILTER_VALIDATE_URL)) {
  echo "";
  }
  else {
   $errore .= "&bull;&nbsp;&nbsp;Inserire un URL valido<br><br>"; 
 }
}