Empêcher le formulaire de rafraîchir la page lors de la soumission

Question

Comment pourrais-je empêcher la page de se rafraîchir lorsque je presse le bouton d'envoi sans aucune donnée dans les champs?

La validation est correctement configurée, tous les champs passent au rouge mais ensuite la page se rafraîchit immédiatement. Ma connaissance de JS est relativement basique.

En particulier, je pense que la fonction processForm() en bas est 'mauvaise'.

HTML

    Envoyer

JS

$(document).ready(function() { 

// Ajouter la classe active aux inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Supprimer la classe active des inputs (si vide)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });

///////////////////
// DÉBUT DE LA VALIDATION
$("#prospects_form").ready(function() {

    // DÉFINIR LES VARIABLES GLOBALES
    var valName = $('#form_name'),
        valEmail = $("#form_email"),
        valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        valMsg = $('#form_message'),
        valCaptcha = $('#form_captcha'),
        valCaptchaCode = $('.form_captcha_code');

    // Générer un captcha
    function randomgen() {
        var rannumber = "";
        // Iterer de 1 à 9, 4 fois
        for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
        // Appliquer le captcha à l'élément
        valCaptchaCode.html(rannumber);
    }
    randomgen();

    // VALIDATION DU CAPTCHA
    valCaptcha.blur(function() {
        function formCaptcha() {
            if ( valCaptcha.val() == valCaptchaCode.html() ) {
                // Incorrect
                valCaptcha.parent().addClass("invalid");
                return false;
            } else {
                // Correct
                valCaptcha.parent().removeClass("invalid");
                return true;
            }
        }
        formCaptcha();
    });

    // Supprimer la classe invalide du captcha en tapant
    valCaptcha.keypress(function() {
        valCaptcha.parent().removeClass("invalid");
    });

    // VALIDATION DE L'E-MAIL (BLUR)
    valEmail.blur(function() {
        function formEmail() {
            if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmail();
    });

    // Supprimer la classe invalide de l'e-mail en tapant
    valEmail.keypress(function() {
        valEmail.removeClass("invalid");
    });

    // VALIDATION À L'ENVOI
    $('#prospects_form').submit(function() {
        console.log('l'utilisateur a appuyé sur le bouton d''envoi');

        // VALIDATION DE L'E-MAIL (ENVOI)
        function formEmailSubmit() {
            if (!valEmailFormat.test(valEmail.val())) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmailSubmit();

        // Valider le captcha
        function formCaptchaSubmit() {
            if( valCaptcha.val() === valCaptchaCode.html() ) {
                // Le captcha est correct
            } else {
                // Le captcha est incorrect
                valCaptcha.parent().addClass("invalid");
                randomgen();
            }
        }
        formCaptchaSubmit();

        // Si le champ NOM est vide
        function formNameSubmit() {
            if ( valName.val() === "" ) {
                // Le nom est vide
                valName.addClass("invalid");
            } else {
                valName.removeClass("invalid");
            }
        }
        formNameSubmit();

        // Si le champ MESSAGE est vide
        function formMessageSubmit() {
            if ( valMsg.val() === "" ) {
                // Le message est vide
                valMsg.addClass("invalid");
            } else {
                valMsg.removeClass("invalid");
            }
        }
        formMessageSubmit();

        // Envoyer le formulaire (si tout est bon)
        function processForm() {
            if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
                $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                $("#form_send").attr("type", "submit");
                return true;
            } else if( !formEmailSubmit() ) {
                valEmail.addClass("invalid");
                return false;
            } else if ( !formCaptchaSubmit() ) {
                valCaptcha.parent().addClass("invalid");
                return false;
            } else if ( !formNameSubmit() ) {
                valName.addClass("invalid");
                    return false;
                } else if ( !formMessageSubmit() ) {
                    valMsg.addClass("invalid");
                    return false;
                } else {
                    return false;
                }
            }
        });
    });
    // FIN DE LA VALIDATION
    /////////////////
});

Answer 1

Vous pouvez empêcher le formulaire de se soumettre avec

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

Bien sûr, dans la fonction, vous pouvez vérifier les champs vides, et si quelque chose ne semble pas correct, e.preventDefault() arrêtera la soumission.

Sans jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

Answer 2

Ajoutez ce code onsubmit="return false" :

Cela a résolu le problème pour moi. Il exécutera toujours la fonction onClick que vous spécifiez.

Answer 3

Remplacez le type de bouton par bouton :

Mon super bouton

Answer 4

Une excellente façon d'éviter de recharger la page lors de la soumission d'un formulaire est d'ajouter return false à votre attribut onsubmit.

Answer 5

Vous pouvez utiliser ce code pour soumettre un formulaire sans rafraîchissement de la page. J'ai fait cela dans mon projet.

$(function () {
    $('#myFormName').on('submit',function (e) {

              $.ajax({
                type: 'post',
                url: 'myPageName.php',
                data: $('#myFormName').serialize(),
                success: function () {
                 alert("L'email a été envoyé!");
                }
              });
          e.preventDefault();
        });
});