Die Jquery-Ajax-Überprüfung schlägt fehl und das Formular wird gesendet, um das Problem_jquery zu lösen

validationEngine reduziert für uns eine Menge Arbeit bei der Front-End-Formularvalidierung. In den meisten Fällen verwenden wir validationEngine, um Formulare auf verschiedene Arten zu validieren:

1 Verwenden Sie die normale Formularübermittlung. In diesem Fall wird das Formular nicht übermittelt, wenn die Überprüfung durch validationEngine fehlschlägt.

2 Verwenden Sie Ajax, um das Formular zu senden, aber verwenden Sie keine Ajax-Verifizierung.

Auch diese Methode ist relativ einfach. Überprüfen Sie einfach, ob die Überprüfung bestanden wurde, bevor wir eine Ajax-Anfrage verwenden, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

//zurückgeben, wenn die Überprüfung fehlschlägt
If(!$("form#ajaxForm").validationEngine("validate")) return ; $.ajax({
Geben Sie ein: „POST“,
URL: $("#ajaxForm").attr("action"),
Daten: $("#ajaxForm").serialize(),
Datentyp: „html“,
Erfolg: function(data){
                                                    });

3 Verwenden Sie zum Senden das normale Formular, aber verwenden Sie die Ajax-Überprüfung. Wenn wir das Formular absenden, kann das Formular nicht übermittelt werden Das Internet soll den Quellcode ändern, das Folgende ist ein Screenshot:

Diese Methode ist für die aktuelle Situation nicht empfehlenswert und kann Auswirkungen auf andere Orte haben:

Code kopieren Der Code lautet wie folgt:

Funktion beforeCall(form,options){

If(window.console){
console.log("Nachdem die Überprüfung der Formularübermittlung bestanden wurde, erfolgt der Rückruf vor der Ajax-Übermittlung"); };
Rückgabe wahr;
};
//
Funktion ajaxValidationCallback(status,form,json,options){
If(window.console){
console.log(status);
};
If(status === true){
warning("das Formular ist gültig!");
}  
};
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, // Ob Ajax zum Senden des Formulars verwendet werden soll
ajaxFormValidationMethod: 'post', //Legen Sie die Art und Weise fest, wie Daten gesendet werden sollen, wenn Ajax
sendet onAjaxFormComplete: ajaxValidationCallback, //Formularübermittlung, nachdem die Ajax-Überprüfung abgeschlossen ist
onBeforeAjaxFormValidation: beforeCall //Nachdem die Überprüfung der Formularübermittlung bestanden wurde, erfolgt der Rückruf vor der Ajax-Übermittlung
});
});



beforeCall Diese Methode wird nicht aufgerufen und kann daher immer noch nicht verwendet werden

4 Verwenden Sie Ajax, um das Formular mit Ajax zu überprüfen und zu senden. Diese Methode ist verwirrend und die obige Methode zum Ändern des Quellcodes ist nicht einfach zu verwenden.

Für die dritte und vierte Methode lauten die Lösungen wie folgt:

Fügen Sie das benutzerdefinierte Attribut control="userName,email" zum Formular-Tag hinzu, das die Ajax-Überprüfung verwendet. Der Attributwert ist die ID des Steuerelements, das mithilfe von Ajax überprüft werden soll (mehrere Steuerelemente werden durch Kommas getrennt).

Code kopieren Der Code lautet wie folgt:

Fügen Sie jedem Steuerelement, das überprüft werden muss, zwei Attribute hinzu: URL (die Adresse der Ajax-Anfrage) und Fehler (die Eingabeaufforderung, wenn die Anfrage fehlschlägt)

Code kopieren Der Code lautet wie folgt:

Deklarieren Sie zwei globale Arrays in Javascript

Code kopieren Der Code lautet wie folgt:

var controlId = new Array(); //Speichern Sie die Kontroll-ID, bei der die Überprüfung fehlgeschlagen ist
varerrors = new Array(); //Speichern Sie die Eingabeaufforderung für eine fehlgeschlagene Überprüfung

Die Idee besteht darin, den Wert des Steuerattributs im Formular-Tag abzurufen (verwenden Sie Kommas, um jede Steuer-ID zu trennen), Ajax zum Durchlaufen der Anforderung zu verwenden und, wenn die Überprüfung fehlschlägt, die Steuer-ID und Eingabeaufforderungsinformationen zur Steuer-ID hinzuzufügen und Fehler. Stellen Sie beim Absenden des Formulars fest, ob die Steuer-ID leer ist. Die Eingabeaufforderungsinformationen werden in einer Schleife angezeigt

Code kopieren Der Code lautet wie folgt:

$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls")
//Wenn das Formular gesendet wird
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;           return false ;                                   }) ;
//Steuerelemente validieren, wenn der Fokus verloren geht
valControls(ajaxForm2Controls);
});



Formularübermittlungsmethode:

Code kopieren Der Code lautet wie folgt: Funktion ajaxForm2Control(obj) {

//Kehre zurück, wenn eine Fehlermeldung vorliegt, und zeige die Fehlermeldung

an If(controlId.length > 0) {
alarminfo() ;
          return false ;                                      }  
If(!$(obj).validationEngine("validate")) return false; //Überprüfen Sie Steuerelemente, die keine Ajax-Überprüfung verwenden (Felder, die nicht über Ajax überprüft werden, können normal überprüft werden und werden zurückgegeben, wenn sie fehlschlagen)
$.ajax({
Geben Sie ein: „POST“,
URL: $(obj).attr("action"),
Daten: $(obj).serialize(),
Datentyp: „html“,
Erfolg: function(data){
                                                                                                                                                                
});
}



Fokusereignis zum Formular hinzufügen

Code kopieren

Der Code lautet wie folgt:

//Steuerelemente, die im Formular
überprüft werden müssen Funktion valControls(ajaxForm2Controls) {
//Steuerelemente abrufen, die eine Ajax-Überprüfung erfordern
var controlStr = ajaxForm2Controls.attr("control");
//Zurückgeben, wenn das Attribut undefiniert ist
If(typeof(controlsStr) === "undefiniert" || ControlsStr.length <= 0) return
//Erhalten Sie separat die Kontroll-ID
var Kontrollen = KontrollenStr.split(/,/g) ; for(var i in Kontrollen) {
//Fokus-Verlassensereignis hinzufügen
           $("#" Controls[i]).blur(function() { 
If($(this).val().length <= 0) return false; //Das Array zurücksetzen
                  controlId.length = 0;                         Fehler.Länge = 0 ;
//Fehlermeldung
            var error = $(this).attr("error") ;   $.ajax({
Geben Sie ein: „GET“,
​​​​​​ URL: $(this).attr("url"),
Daten: $(this).serialize(),
Datentyp: „text“,
Erfolg: function(data){
If(data==="true") {
//Füge die Fehlermeldung in das Array ein, wenn die Überprüfung fehlschlägt
                                                                                                                                                                                                                                                controlId.push(controls[i]);                                                        errors.push(error);                                                                                                                                                                              alarminfo() ;
                                                                                                                                                                                                                                                                         });                                      }) ;                           }  
}



Fehlermeldung:





Code kopieren

Der Code lautet wie folgt:

//Popup-Nachricht
Funktion alarminfo() {
If(controlId.length > 0) {
for(var i in controlId) {
//validationEngine-Methode, öffnet eine Eingabeaufforderung für die angegebene ID
                                                     // Verwendung:$("#id").validationEngine("showPrompt","Prompt content","load");
// & lt; span style = "" & gt; Erstellen Sie eine Eingabeaufforderung in diesem Element, 3 heißt es: "Pass", "Fehler", "Laden" & lt;/span & gt; & lt;/span & gt;                  $("#" controlId[i]).validationEngine("showPrompt",errors[i], "error");                                                                         }  
}



Auf diese Weise können wir beim Absenden des Formulars auf die dritte oder vierte Art einfach die Steuer-ID aufrufen, um vor dem Absenden zu sehen, ob ein Wert vorhanden ist.