Convalida remota personalizzata Parsley con AJAX

Question

Ho avuto problemi nell'implementazione di parsley.remote.js a causa di AMD nella nostra configurazione richiesta.

Sto tentando di implementare un validatore personalizzato che esegue una richiesta AJAX e restituisce vero o falso in base alla risposta.

Il problema è che continuo a ricevere una risposta falsa indipendentemente da ciò che restituisce la richiesta AJAX.

Perché questo codice non funziona mai?

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

Il problema è che la chiamata AJAX al validatore a distanza è stato fatto in modo asincrono e questo significa che la vostra risposta è tornato troppo tardi per Prezzemolo, così sarà sempre assumerà un risultato falso per la convalida.

Mentre le chiamate AJAX sincrone dovrebbe essere avoided, se si aggiunge il async: false opzione al tuo AJAX chiamare il codice dovrebbe funzionare:

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); 

Ecco un metodo asincrono che ho trovato che ha funzionato per me - è necessario caricare parsley.remote.min.js invece di parsley.min.js, quindi impostare un validatore remota personalizzato utilizzando questo codice:

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