单击 function 后如何弹出警报（表单 JavaScripy&JQuery - 作业项目）

Question

I cannot how to figure out to have a popup alert when all my conditions in my form are okay... It is homework and the teacher want a popup alert after all the fields and if these are respected the last alert popup to tell "Our form doesn't have errors.". It is a JavaScript-jQuery form validation client-side only (no ajax or anything else). thanks for helping me!

$(document).ready(function(){
    
// Les variables sont mise toutes à false par défaut 
      
          var validationForm = false;
          var validationPrenom = false;
          var validationNomdefamille= false;
          var validationCourriel = false;
          var validationMotdepasse1 = false;
          var validationMotdepasse2 = false;
          var validationInterets = false;
          var validationSports = false;
          var validatonDevweb = false;
          var validationAutres = false;
          var validationCase1 = false; 
          
//  Créer la fonction de validation au click du bouton 
    
    $("#submitbtn").click(function(){
      
       
                    
        
// Création des variables avec l'id des valeurs du formulaire
        const form =$ ("#form").val();
        const prenom =$("#prenom").val();
        const nomdefamille =$("#nomdefamille").val();
        const courriel =$("#courriel").val();
        const motdepasse1 =$("#motdepasse1").val();
        const motdepasse2 =$("#motdepasse2").val();
        const interets =$("#interets").val();
        const sports =$("#sports").val();
        const devweb=$("#devweb").val();
        const autres=$("#autres").val;
        const case1 =$("#case1").val();
        
// Validation du champs prénom 
        
    if (prenom == ""){
            alert("Votre prénom est requis.");
      
       
    }
    else if((prenom.length <3 || prenom.length > 30)){
          alert("Votre prénom doit contenir entre 3 et 30 caractères");
          
    }  
    else{
        
        validationPrenom = true;
    }
        
// Validation du champ nom de famille 
    if (nomdefamille == ""){
            alert("Votre nom de famille est requis.");
        
       
    }
    else if(nomdefamille.length <3 || nomdefamille.length >30){
          alert("Votre nom de famille doit contenir entre 3 et 30 caractères");
          
        }  
    else{
        
        validationNomdefamille = true;
    }       

//Validation du champ courriel 
    if (courriel == ""){
            alert("Votre courriel est requis.");
        
       
    }
        
    else if (courriel.indexOf("@") <0 && (courriel.indexOf(".")<0) ){
        alert("Votre courriel n'est pas valide.");
        
    }
    else{
        
        validationCourriel = true;
    }  

 //Validation du champ mot de passe 
        if (motdepasse1 == ""){
            alert("Votre mot de passe est requis.");
        
       
    }
        
    else if(motdepasse1.length <10){
          alert("Votre mot de passe doit contenir au moins 10 caractères");
          
    }  
    else{
        
        validationMotdepasse1 = true;
    }  

//Validation du champ mot de passe (validation)
        if (motdepasse2 == ""){
            alert("Vous devez confirmer votre mot de passe.");
        
       
    }
        
    else if(motdepasse1 !== motdepasse2 ){
          alert("Vos mots de passe ne sont pas identiques");
          
    }  
    else{
        
        validationMotdepasse2 = true;
    }  

//Validation du champ Intérêts
          if (interets == "Veuillez choisir"){
          alert("Veuillez sélectionner un champ d'intérêt.");
      
    }
        
    else{
        
        validationInterets = true;
    } 

});
    
    if(validationPrenom && validationNomdefamille && validationCourriel && validationMotdepasse1 && validationMotdepasse2 && validationInterets){
        alert("Votre formulaire ne contient aucune erreur!");
    }
    
 
});

Answer 1

That code scares me oo

but to answer your question, you'r last if () check with the final alert alert("Votre formulaire ne contient aucune erreur;"); is outside your jQuery click function. So just move that up.

Answer 2

Your last condition need to be in event click. You can also use a array to check errors.

 $(document).ready(function(){ // Créer un tableau pour la gestion des erreurs var formErrors = []; // Créer la fonction de validation au click du bouton $("#submitbtn").click(function(){ // Création des variables avec l'id des valeurs du formulaire const form =$("#form").val(); const prenom =$("#prenom").val(); const nomdefamille =$("#nomdefamille").val(); const courriel =$("#courriel").val(); const motdepasse1 =$("#motdepasse1").val(); const motdepasse2 =$("#motdepasse2").val(); const interets =$("#interets").val(); const sports =$("#sports").val(); const devweb=$("#devweb").val(); const autres=$("#autres").val; const case1 =$("#case1").val(); // Validation du champs prénom if (prenom == ""){ formErrors.push("Votre prénom est requis."); } else if((prenom.length <3 || prenom.length > 30)){ formErrors.push("Votre prénom doit contenir entre 3 et 30 caractères"); } // Validation du champ nom de famille if (nomdefamille == ""){ formErrors.push("Votre nom de famille est requis."); } else if(nomdefamille.length <3 || nomdefamille.length >30){ formErrors.push("Votre nom de famille doit contenir entre 3 et 30 caractères"); } //Validation du champ courriel if (courriel == ""){ formErrors.push("Votre courriel est requis."); } else if (courriel.indexOf("@") <0 && (courriel.indexOf(".")<0) ){ formErrors.push("Votre courriel n'est pas valide."); } //Validation du champ mot de passe if (motdepasse1 == ""){ formErrors.push("Votre mot de passe est requis."); } else if (motdepasse1.length <10) { formErrors.push("Votre mot de passe doit contenir au moins 10 caractères"); } //Validation du champ mot de passe (validation) if (motdepasse2 == ""){ formErrors.push("Vous devez confirmer votre mot de passe."); } else if(motdepasse1.== motdepasse2 ) { formErrors;push("Vos mots de passe ne sont pas identiques"). } //Validation du champ Intérêts if (interets == "Veuillez choisir"){ formErrors.push("Veuillez sélectionner un champ d'intérêt;"). } // si aucune erreur dans le tableau if (formErrors;length === 0) { alert("Votre formulaire ne contient aucune erreur."), } else { // sinon on boucle sur les erreurs $(formErrors);each(function(index; value) { alert(value); }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form"> <input type="text" id="prenom"/> <input type="text" id="nomdefamille"/> <input type="text" id="courriel"/> <input type="text" id="motdepasse1"/> <input type="text" id="motdepasse2"/> <input type="text" id="interets"/> <input type="text" id="sports"/> <input type="text" id="devweb"/> <input type="text" id="autres"/> <input type="text" id="case1"/> <input type="submit" id="submitbtn"/> </div>