Parsley Benutzerdefinierte Remote-Validierung mit AJAX

Question

Ich hatte Probleme mit der Implementierung von petersilie.remote.js wegen AMD in unserer erfordern Konfiguration.

Ich versuche, einen benutzerdefinierten Validator zu implementieren, der eine AJAX-Anforderung ausführt und True oder False basierend auf der Antwort zurückgibt.

Problem ist, ich bekomme immer eine Antwort von false unabhängig davon, was die AJAX-Anfrage zurückgibt.

Warum funktioniert dieser Code nie?

window.ParsleyValidator.addValidator('cardcode', 
 
    function (value) { 
 
     var valid = false; 
 
     $.ajax({ 
 
      url: '/data/checkout/cvvCheck.json', 
 
      data: { 
 
       cvv: value 
 
      }, 
 
      success: function(response) { 
 
       if(response.valid === true) { 
 
        return true; 
 
       } 
 
       else { 
 
        return false; 
 
       } 
 
      } 
 
     }); 
 
    }, 32);

<input type="tel" name="card-code" id="card-code" maxlength="4" required="" data-parsley-required="true" data-parsley-required-message="Please enter the cvv" data-parsley-type="number" data-parsley-type-message="Please enter a valid cvv" data-parsley-cardcode="true" data-parsley-cardcode-message="Please ensure you are entering the correct cvv." data-parsley-id="65">

Answer 1

Das Problem ist, dass der AJAX-Aufruf zum Remote-Validator wird asynchron gemacht wird, und das bedeutet, dass Ihre Antwort zurück zu spät für Petersilie kommt, so ist es immer ein falsches Ergebnis übernehmen wird für die Validierung.

Während synchrone AJAX Anrufe avoided sein sollten, wenn Sie die async hinzufügen: false Option auf Ihre AJAX aufrufen sollte Ihr Code funktioniert:

window.ParsleyValidator.addValidator('cardcode', 
    function (value) { 
     var valid = false; 
     $.ajax({ 
      url: '/data/checkout/cvvCheck.json', 
      data: { 
       cvv: value 
      }, 
      async: false, 
      success: function(response) { 
       if(response.valid === true) { 
        return true; 
       } else { 
        return false; 
       } 
      } 
     }); 
    }, 32); 

Hier ist eine asynchrone Methode, die ich gefunden, dass für mich gearbeitet - Sie laden müssen parsley.remote.min.js statt parsley.min.js, dann Setup einen benutzerdefinierten Remote-Validator mit diesem Code:

window.Parsley.addAsyncValidator('cardcode', function (xhr) { 
    var response = xhr.responseText; 
    if (response.valid === true) { 
     return true; 
    } else { 
     return false; 
    } 
}, '/data/checkout/cvvCheck.json');