[Résolu] Bloquer le submit de mon formulaire tant que la validation JS

Question

Torkhan59

26 Dec 2019 à 10:51

Bonjour les amis,
Voici mon pitit problème: j'ai un zoli formulaire, dont les champs sont validés via jquery (testé et parfaitement fonctionnel) et mon php pour la gestion d'envois du mail(fonctionnel également). tout est ok séparément. Mais en repassant le bouton en type submit l'envoie du mail se fait directement sans tenir compte des validations Jq (j ai le temps de voir les toggle se faire avant la redirection) et c'est là que je sèche. je n arrive pas à faire en sorte que le submit ne se fasse que si les validations sont ok.
voici le code et mes remerciements pour le temps que vous voudrez bien m'accorder.
/bizz

 <form action="contacts.php" method="POST">
                    <div class="form-group row">
                        <div class="col-md-1"></div>
                        <label for="nomform" class="col-md-5 col-form-label">Nom*</label>
                        <div class="col-md-5">
                            <input type="text" maxlength="50" name="nom" class="form-control notempty" id="nomform" placeholder="Votre nom">
                            <small id="nomhelp1" class="form-text text-danger d-none">
                                Veuillez saisir votre nom.
                            </small>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-1"></div>
                        <label for="prenomform" class="col-md-5 col-form-label">Prénom*</label>
                        <div class="col-md-5">
                            <input type="text" maxlength="50" name="prenom" class="form-control notempty" id="prenomform" placeholder="Votre prénom">
                            <small id="nomhelp2" class="form-text text-danger d-none">
                                Veuillez saisir votre prénom.
                            </small>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-1"></div>
                        <label for="email" class="col-md-5 col-form-label">Mail*</label>
                        <div class="col-md-5">
                            <input type="email" class="form-control notempty" id="email">
                            <small id="nomhelp3" class="form-text text-danger d-none">
                                Veuillez saisir une adresse mail.
                            </small>
                        </div>
                        <div class="col-md-1"></div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-1"></div>
                        <label for="sujet" class="col-md-5 col-form-label">Sujet</label>
                        <div class="col-md-5">
                            <input type="text" maxlength="50" name="sujet" id="sujet" class="form-control" placeholder="Sujet">
                        </div>
                        <div class="col-md-1"></div>
                    </div>



                    <div class="form-group row">
                        <div class="col-md-1"></div>
                        <label for="message" class="col-md-5 col-form-label">Message</label>
                        <div class="col-md-5">
                            <textarea name="message" spellcheck="true" id="message" rows="6" class="form-control" placeholder="Votre message"></textarea>
                            <p id="compteur">0 mots - 0 Caracteres / 3000</p>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-1"></div>
                        <label for="connupar" class="col-md-5 col-form-label" id="connupar">Comment nous <br> avez-vous connu?</label>

                        <div class="col-md-5 ">

                            <input type="checkbox" name="connupar " value="Recherche Internet">&nbsp;Recherche Internet<br>
                            <input type="checkbox" name="connupar " value="Bouche à Oreilles">&nbsp;Bouche à Oreille<br>
                            <input type="checkbox" name="connupar " value="réseaux sociaux">&nbsp;réseaux sociaux<br>
                            <input type="checkbox" name="connupar " value="Autre">&nbsp;Autre<br>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <br>
                    <div class="form-group row mt-3">

                        <div class="col-md-1"></div>
                        <div class="pt-5"></div>
                        <button type="submit" class="col-md-10 boutonSend btn btn-outline-dark  mb-4 form-control ">Envoyer</button>
                        <div class="col-md-3"></div>
                        <button type="reset" class="col-md-6 col-sm-3 btn btn-outline-dark  mb-3 form-control ">Reset</button>
                        <div class="col-md-3"></div>
                    </div>

                </form>

// Controle de validité des inputs
$('.boutonSend').on('click', function(event, target){
    checkEmptyInputs();

});



function checkEmptyInputs(){

    $(".notempty").each(function (i, elt){
        if(elt.value == ""){
            toggleInputStatus("#" + elt.id);
            $(elt).one('focusin', function(){
                toggleInputStatus("#" + elt.id)
            })
        }
        else if(elt.id == "email"){
            checkMailFormat("#email");
            $(elt).one('focusin', function(){
                toggleInputStatus("#" + elt.id)
            })
        }

    })

}

//controle des forms

function checkMailFormat(selector){
    let pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    let saisie = $(selector)[0].value;
    ! saisie.match(pattern) ?
        toggleInputStatus(selector, "Votre adresse email n'est pas une adresse valide !")
        : null;
}

function toggleInputStatus(selector, message){
    $(selector).toggleClass("border-danger");
    $(selector).next().toggleClass("d-none");
    message ? $(selector).next()[0].textContent = message : null;
}
function toggleInputStatus2(selector, message){

    $(exampleCheck3).next().toggleClass("d-none");
    message ? $(exampleCheck3).next()[0].textContent = message : null;
}

function toggleInputStatus3(selector, message){

    $(uname1).next().toggleClass("d-none");
    message ? $(uname1).next()[0].textContent = message : null;


}//fin controle form

<?php

 
// Pour les champs $expediteur / $copie / $destinataire, séparer par une virgule s'il y a plusieurs adresses
	$destinataire = 'xxxx@yyyyy.fr';

	//taitement des variables par htmlspecialchars//
	$expediteur = htmlspecialchars($_POST['mail']);
	$objet = htmlspecialchars($_POST['sujet']);
	$nom = htmlspecialchars($_POST['nom']);
	$prenom = htmlspecialchars($_POST['prenom']);
	$message = htmlspecialchars($_POST['message']);
	
	
	$headers  = 'MIME-Version: 1.0' . "\n"; // Version MIME
	$headers .= 'Content-type: text/html; charset=utf8'."\n"; // l'en-tete Content-type pour le format HTML
	$headers .= 'To: '.$destinataire."\n"; // Mail de reponse
	$headers .= 'From: "via site"<'.$expediteur.'>'."\n"; // Expediteur


	//tableau du corp du message
    $message_content = '
  <table>
  <tr>
  <td><b>Emetteur du message:</b></td>
  </tr>
  <tr>
  <td>'. $nom . '</td>
  </tr>
  <tr>
  <td>'. $prenom . '</td>
  </tr>
  <tr>
  <td><b>Contenu du message:</b></td>
  </tr>
  <tr>
  <td>'. $message .'</td>
  </tr>
  </table>
  ';
	//fonction d 'envoi
 	if(mail($destinataire, $objet, $message_content, $headers))
	{
		echo "Votre message a bien été envoyé merci. Vous allez être rédirigé vers la page d'accueil. ";
	}
	else // Non envoyé
	{
		echo '<script languag="javascript">alert("Votre message n\'a pas pu être envoyé");</script>';
    }
    
    //redirection
    header("refresh:5;url=index.html");
?>

JENCAL

26 Dec 2019 à 10:53

Hello

Tu devrais travailler du coup sur l'évent submit de ton form

$("form").on("submit",function(){

//et la tu fais ce que tu veux

});

Torkhan59

27 Dec 2019 à 08:48

Merci JENCAL, je vais chercher de ce côté là.
/bizz

tankarasu

30 Dec 2019 à 16:47

je ne sais pas du coup si sa marche pour ce cas là mais que pensez-vous d'un event.preventDefault dans le gestionnaire d'évènement ?

Torkhan59

2 Jan 2020 à 10:16

Bonjour,

merci de votre réponse.

Je n ai pas encore trouvé ma solution (je finirais bien par y arriver), et je la posterais dès que (pour le partage) si bien sur ça n’embête pas trop les modos de laisser le post ouvert encore un peu.

/bizz

JENCAL

2 Jan 2020 à 12:04

JENCAL a écrit :
Hello

Tu devrais travailler du coup sur l'évent submit de ton form

$("form").on("submit",function(){

//et la tu fais ce que tu veux

});

En gros tu dois checker tes inputs dans l'event submit de ton form checkEmptyInputs

$("form").on("submit",function(event){

if (checkEmptyInputs != fasle){
//alors $(form).submit();
} else{
event.preventDefault();
return false;
}

});[

Torkhan59

5 Jan 2020 à 10:31

Merci jean pierre de ta réponse, ne t'excuse pas tu as surement raison, je n ai que 4 mois de formation et je n ai pas encore vu le php!!! j ai bricolé ça avec un clou rouillé et un caillou hihi.
Mais cela fonctionne.(l envoie du mail en tout cas)
Je pensais l'améliorer ensuite selon mes apprentissages.
Du coup merci encore de ta réponse mais je ne suis pas en capacité encore de savoir l'utiliser.

Jencal: je travaille sur ta piste, pour l instant sans succés. merci à toi

Torkhan59

22 Jan 2020 à 17:38

Bien le bonjour,

Navré du délais (bcp de taf tout ça..).

Comme promis voici la solution que j'ai trouvé.

//event on click qui renvoie sur la fonction de contrôle

$('.boutonSend').on('click', function(event, target){
    checkEmptyInputs();
});

let erreur=0;// variable pour recevoir le resultat de checkEmptyInputs() et activer submition()

//Controle et verification des inputs
function checkEmptyInputs(){

    $(".notempty").each(function (i, elt){//contrôle que les inputs ne sont pas vides
        if(elt.value == ""){
            erreur=true;
            toggleInputStatus("#" + elt.id);//et renvoie sur la fonction toggle
            $(elt).one('focusin', function(){
                toggleInputStatus("#" + elt.id);
                erreur=false;
            })
        }
     }) ;
    submition();
}

//Fonction de Submit

function submition(){
    if(erreur==false){
       $("#formA").submit();
    }
}

Bien dans mon form le bouton est passé en type= button.

Merci à ceux qui on t pris sur leur temps pour me répondre.

/bizzzz

PatateDouce

22 Dec 2020 à 13:39

Salut Torkahn59,

J'espère que ton apprentissage passionné se passe bien!
Le post n'est plus tout jeune mais j'en ai vu de plus vieux, et comme tu sembles vouloir bien faire et apprendre je te soumets deux remarques.

Attention j'ai pas la science infuse c'est juste pour pousser la réflexion! D'ailleurs, les clous rouillées ça peut être utile et c'est plus joli un code bricolé avec intelligence qu'un code copié avec stupidité Smiley cligne

!!

1)Il me semble (mais tout change si vite!) que l'évènement onClick() n'est pas déclenché par la validation au clavier. Ce qui implique que les personnes malvoyantes et les anti-souris ne déclencheront pas ton script.
Le fait que ces personnes n'aient pas accès à des scripts pour faire beau, trucs qui clignotent et autres gadgets...c'est pas fatal même si c'est (très)dommage!! Mais là il s'agit de vérifications sur des points que toi, programmeur, tu considères comme incontournable pour la suite des évènements!
* C'est pour ça que j'aime bien onSubmit().
* Tu peux aussi déclencher le click quand un utilisateur appuie sur entrée...bref on trouve toujours des solutions quand on cherche.

2) Que fais tu si je désactive javascript juste parce que je suis un vilain petit canard malveillant?
Quoi que tu fasses coté client tu devrais prévoir la ceinture de sécurité coté serveur, surtout pour les valeurs $_POST et $_GET car n'importe qui peut les modifier :
*Primo; est-ce que ce dont tu as besoin existe (isset)
*Secundo; est ce que la valeur est sécurisée? (ça tu le fais un peu avec htmlspecialchar )
*Tercio; la valeur est-elle conforme à ton besoin? (Par exemple le mail au format mail, tu peux te faire tes propres petites fonctions, et tu repasses tout à la moulinette Smiley lol

)

Désolée si j'ai déterré, toussa toussa, joyeuses ligne de code à tous!

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Bloquer le submit de mon formulaire tant que la validation JS