La vérification jquery ajax échoue et le formulaire est soumis pour résoudre le problème_jquery

validationEngine nous réduit beaucoup de travail dans la validation frontale des formulaires. Dans la plupart des cas, nous utilisons validationEngine pour valider les formulaires de plusieurs manières :

1 Utilisez la soumission normale du formulaire. Dans ce cas, le formulaire ne sera pas soumis si validationEngine échoue à la vérification.

2 Utilisez ajax pour soumettre le formulaire, mais n'utilisez pas la vérification ajax.

Cette méthode est également relativement simple, il suffit de vérifier si la vérification est réussie avant d'utiliser la requête ajax, par exemple :

Copier le code Le code est le suivant :

//revient lorsque la vérification échoue
If(!$("form#ajaxForm").validationEngine("validate")) return
$.ajax({
Tapez : "POST",
URL : $("#ajaxForm").attr("action"),
Données : $("#ajaxForm").serialize(),
Type de données : "html",
Succès : fonction(données){
                                                  });

3 Utilisez le formulaire normal pour soumettre, mais utilisez la vérification ajax. Cette méthode est un peu déroutante. Lorsque nous soumettons le formulaire, le formulaire peut être soumis même si la vérification ajax ne réussit pas. Concernant cette situation, de nombreux exemples sont disponibles. Internet doit changer le code source, ce qui suit est une capture d'écran :

. Cette méthode est réalisable pour la situation actuelle. Cette méthode de modification elle-même n'est pas recommandée et peut avoir un impact sur d'autres endroits. L'une des choses que j'ai trouvées est lorsque la situation suivante se produit :

.

Copier le code Le code est le suivant :

fonction avantAppel(formulaire,options){
Si(window.console){
console.log("Une fois la vérification de la soumission du formulaire réussie, le rappel avant la soumission Ajax"); };
Renvoie vrai ;
};
//
function ajaxValidationCallback(status,form,json,options){
Si(window.console){
console.log(statut);
};
Si(statut === vrai){
alert("le formulaire est valide!");
}  
};
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation : true, //Utiliser ou non Ajax pour soumettre le formulaire
ajaxFormValidationMethod : 'post', //Définissez la manière d'envoyer les données lorsque Ajax les soumet
onAjaxFormComplete : ajaxValidationCallback, //Soumission du formulaire, une fois la vérification Ajax terminée
onBeforeAjaxFormValidation : beforeCall //Une fois la vérification de la soumission du formulaire réussie, le rappel avant la soumission Ajax
});
});

beforeCall Cette méthode ne sera pas appelée, elle ne peut donc toujours pas être utilisée

4 Utilisez ajax pour vérifier et soumettre le formulaire en utilisant ajax. Cette méthode prête à confusion et la méthode de modification du code source ci-dessus n'est pas facile à utiliser.

Pour les troisième et quatrième méthodes, les solutions sont les suivantes :

Ajoutez l'attribut personnalisé control="userName,email" à la balise de formulaire qui utilise la vérification ajax. La valeur de l'attribut est l'ID du contrôle à vérifier à l'aide d'ajax (plusieurs contrôles sont séparés par des virgules).

Copier le code Le code est le suivant :

Ajoutez deux attributs url (l'adresse de la requête ajax) et error (le message d'invite en cas d'échec) à chaque contrôle qui doit être vérifié

Copier le code Le code est le suivant :

Déclarez deux tableaux globaux en javascript

Copier le code Le code est le suivant :

var controlId = new Array(); //Enregistre l'ID de contrôle dont la vérification a échoué
var error = new Array(); //Enregistre le message d'invite en cas d'échec de la vérification

L'idée est d'obtenir la valeur de l'attribut de contrôle sur la balise de formulaire (utilisez des virgules pour séparer chaque ID de contrôle), d'utiliser ajax pour parcourir la requête, et lorsque la vérification échoue, d'ajouter l'ID de contrôle et d'inviter les informations à controlId et les erreurs. et les informations d'invite. Lors de la soumission du formulaire, déterminez si le controlId est vide. S'il n'est pas vide, les informations d'invite seront affichées en boucle

.

Copier le code Le code est le suivant :

$(fonction() {
var ajaxForm2Controls = $("form#ajaxForm2Controls")
//Quand le formulaire est soumis
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
          return false ;                                  }) ;
//Valider les contrôles en cas de perte de focus
valControls(ajaxForm2Controls);
});

Méthode de soumission du formulaire :

Copier le code Le code est le suivant :

function ajaxForm2Control(obj) {
//Retour lorsqu'il y a un message d'erreur et afficher le message d'erreur
If(controlId.length > 0) {
alertinfo() ;
          return false ;                                        }  
If(!$(obj).validationEngine("validate")) return false; //Vérifie les contrôles qui n'utilisent pas la vérification ajax (les champs qui ne sont pas vérifiés ajax peuvent être vérifiés normalement et seront renvoyés s'ils échouent)
$.ajax({
Tapez : "POST",
URL : $(obj).attr("action"),
Données : $(obj).serialize(),
Type de données : "html",
Succès : fonction(données){
                                                                                         }                                                                                                   });
}



Ajouter un événement focus au formulaire

Copier le code

Le code est le suivant :

//Contrôles à vérifier sous le formulaire
function valControls(ajaxForm2Controls) {
//Obtenir les contrôles qui nécessitent une vérification ajax
var contrôlesStr = ajaxForm2Controls.attr("contrôle");
//Retour lorsque l'attribut n'est pas défini
If(typeof(controlsStr) === "undefined" || CONTROLSStr.length <= 0) return
//Obtenir séparément l'ID de contrôle
var contrôles = contrôlesStr.split(/,/g)
for(var i dans les contrôles) {
//Ajouter un événement de sortie de focus
           $("#" contrôles[i]).blur(function() { 
If($(this).val().length <= 0) renvoie false
//Réinitialise le tableau
                  controlId.length = 0 ;                                         erreurs.longueur = 0 ;                           //Message d'erreur
            var erreur = $(this).attr("erreur") ;  
$.ajax({
Tapez : "OBTENIR",
​​​​​​ url : $(this).attr("url"),
Données : $(this).serialize(),
Type de données : "texte",
Succès : fonction(données){
Si(data==="true") {
//Mettez le message d'erreur dans le tableau si la vérification échoue
                                                                                                                                                                                                                                                              controlId.push(controls[i]);                                                           erreurs.push(erreur);                                                                                                                                                                             alertinfo() ;
                                                                                                                                                                                                                                                                         });                                      }) ;                           }  
}



Message d'erreur :





Copier le code

Le code est le suivant :

//Message contextuel
fonction alertinfo() {
If(controlId.length > 0) {
for(var i in controlId) {
//méthode validationEngine, affiche une invite pour l'ID spécifié
.                                                            // Utilisation :$("#id").validationEngine("showPrompt","Contenu de l'invite","load");                                                                                                                                                                                                                                      //                  $("#" controlId[i]).validationEngine("showPrompt", erreurs[i], "erreur");                                                                             }  
}



De cette façon, lorsque nous soumettons le formulaire de la troisième ou quatrième manière, nous pouvons simplement appeler le controlId pour voir s'il y a une valeur avant de le soumettre.