[英]How to have a alert pop-up after my click function (form JavaScripy&JQuery - homework projet)
當我的表格中的所有條件都正常時,我無法弄清楚如何彈出警報......這是家庭作業,老師希望在所有字段之后彈出警報,如果這些都得到尊重,最后一個警報彈出窗口告訴“我們表格沒有錯誤。”。 它只是一個 JavaScript-jQuery 表單驗證客戶端(沒有 ajax 或其他任何東西)。 謝謝你幫助我!
$(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!");
}
});
那個代碼嚇到我了
但要回答你的問題,你最后一個if ()
檢查最后的警報alert("Votre formulaire ne contient aucune erreur;");
在您的 jQuery 之外單擊 function。 所以把它向上移動。
您的最后一個條件需要在事件點擊中。 您還可以使用數組來檢查錯誤。
$(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.