Form con validazione in js

**Angemon47** · 28-02-2016, 14:31

Salve, ho un problema con il js. Non capisco perchè premendo il tasto "invio" mi aggiorna la pagina quando di regola non dovrebbe farlo visto che il campo "Oggetto" è vuoto e quindi di conseguenza dovrebbe stamparmi il messaggio di errore con l'id "campi" che per un secondo lo stampa ma dopo aggiorna la pagina con il messaggio di successo con l'id "inviata".

Codice js:

codice:

    var DIVcampi = document.getElementById('campi');
    var DIVerrore = document.getElementById('errore');
    var DIVinviata = document.getElementById('inviata');
    function Modulo() {
        DIVcampi.setAttribute('style', 'display: none');
        DIVinviata.setAttribute('style', 'display: none');
        DIVerrore.setAttribute('style', 'display: none');
        var oggetto = document.modulo.oggetto.value;
        var messaggio = document.modulo.messaggio.value;
        if ((oggetto == "") || (oggetto == "undefined")) {
            inserisci();
            document.modulo.oggetto.focus();
        }else if((messaggio == "") || (messaggio == "undefined")){
            inserisci();
            document.modulo.messaggio.focus();
        }else{
            document.modulo.action = "assistenza.php";
            document.modulo.submit();
        }
    }
        function inserisci() {
        DIVinviata.setAttribute('style', 'display: none');
        DIVerrore.setAttribute('style', 'display: none');
        DIVcampi.setAttribute('style', 'visible');
        };
        function inviata() {
        DIVcampi.setAttribute('style', 'display: none');
        DIVerrore.setAttribute('style', 'display: none');
        DIVinviata.setAttribute('style', 'visible');
        };
        function errore() {
        DIVcampi.setAttribute('style', 'display: none');
        DIVinviata.setAttribute('style', 'display: none');
        DIVerrore.setAttribute('style', 'visible');
        };

form:

codice:

<form class="form-horizontal form-bordered" action="#" id = "invio" name = "modulo" method="POST">
<div class="panel panel-default">
<div class="panel-heading"><h6 class="panel-title">Compila la richiesta di supporto ed inviala</h6></div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label">OGGETTO</label>
<div class="col-sm-10">
<input type="text" name = "oggetto" class="form-control" autofocus placeholder="Scrivi qui l'oggetto dell'e-mail per la richiesta di assistenza..." onkeydown="if (event.keyCode == 13) document.getElementById('invia').click()">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">MESSAGGIO</label>
<div class="col-sm-10">
<textarea style="resize:none" name = "messaggio" placeholder="Scrivi qui il messaggio..." rows="5" cols="5" class="form-control"></textarea>
</div>
</div>
<div style="display: none" id = "campi" class="alert alert-danger fade in block-inner">I campi devono essere tutti compilati.</div>
<div style="display: none" id = "errore" class="alert alert-danger fade in block-inner">E-mail non inviata, contattare l'amministratore.</div>
<div style="display: none" id = "inviata" class="alert alert-success fade in block-inner">Richiesta inviata!</div>
<div class="form-actions text-right">
<input type="button" id = "invia" value="Richiedi Assistenza" class="btn btn-primary" onclick="Modulo();">
</div>
</div>
</div>
</form>

Php:

codice:

if($_POST){
        include_once("configurazione/config.php");
        $oggetto = htmlentities($_POST['oggetto']);
        $messaggio_sistemato = str_replace(array("\n","\r"), "<br>", htmlentities($_POST['messaggio']));
        $messaggio = '<html lang="it">
                      <head>
                      <title>Cowo Labs - Assistenza</title>
                      <body class="login-body">
                      '.$messaggio_sistemato.'<br>
                      <br>
                      '.NOME_AZIENDA.'
                      </body>
                      </html>';
        $intestazioni  = "MIME-Version: 1.0\r\n";
        $intestazioni .= "Content-type: text/html; charset=iso-8859-1\r\n";
        $intestazioni .= "From: ".NOME_AZIENDA." <".EMAIL."\r\n";
        $destinatario = "mrfixedstring@gmail.com";
        if(mail($destinatario, $oggetto, $messaggio,$intestazioni)){
            echo '<script type="text/javascript"> inviata(); </script>';
        }else{
            echo '<script type="text/javascript"> errore(); </script>';
        }
    }

**m4rko80** · 01-03-2016, 10:46

Ciao, banalmente ( ma è un classico errore

) se vuoi che una funzione blocchi il submit devi far ritornare da questa true o false.
onCick="return Modulo()".
In questa in base a quel che accede ritornerai TRUE o FALSE.
Oppure gestisci con jQuery gli eventi bloccando il submit (sul form submit appunto) e lo esegui( sempre con jquey ) a validazione completata/corretta.

codice:

$('#idform').on('submit',function(event){
 event.preventDefault();
//.....validazione...... passata....
$(this).submit();
});

Discussione: Form con validazione in js

Strumenti discussione

Ricerca discussione

Visualizza

Form con validazione in js

Permessi di invio