Plugin JQuery Validation: Utiliser la méthode Ajax personnalisée

Question

Si vous le souhaitez, vous pouvez demander de l'aide sur le Jquery form validation plugin.

Je valide le champ email de mon formulaire sur flou en faisant un appel ajax à ma base de données, qui vérifie si le texte dans le champ email est actuellement dans la base de données.

// Check email validity on Blur 
     $('#sEmail').blur(function(){ 
     // Grab Email From Form 
     var itemValue = $('#sEmail').val(); 
     // Serialise data for ajax processing 
     var emailData = { 
      sEmail: itemValue 
     } 
     // Do Ajax Call 
     $.getJSON('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc?method=getAdminUserEmail&returnFormat=json&queryformat=column', emailData, function(data){ 

        if (data != false) { 
         var errorMessage = 'This email address has already been registered'; 
        } 
        else { 
         var errorMessage = 'Good' 
        } 
       }) 
    }); 

Ce que je voudrais faire, est encorporate cet appel dans les règles de mon JQuery Validation Plugin ... par exemple

$("#setAdminUser").validate({ 
     rules:{ 
      sEmail: { 
        required: function(){ 
        // Replicate my on blur ajax email call here 
       }     
      }, 
      messages:{ 
       sEmail: { 
        required: "this email already exists"  

      } 
     }); 

Vous vous demandez s'il y a de toute façon d'y parvenir? Un grand merci

Answer 1

Vous pouvez ajouter une méthode de validation personnalisée comme celui-ci

$.validator.addMethod('unique', 
        function(value) { 
     $.get('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc','?method=getAdminUserEmail&returnFormat=json&queryformat=column&emailData='+ value, 
          function(return_data) { 
           return return_data; 
          }) 
         } 
         , "this email already exists" 
        ); 

puis ajoutez la classe unique à votre champ email ou vous pouvez utiliser quelque chose comme ça

$.validator.addClassRules("unique-email", { 
       unique: true 
      }); 

Answer 2

Essayez ceci:

$.validator.addMethod('unique', 
      function(value) { 
     var result = $.ajax({ 
          async:false, 
          url:"http://yoursamedomain.com/checkemail", 
          data:'email='+ value, 
          dataType:"text" }); 

     if(result .responseText) return true; else return false; 

      } , "This email address has already been registered"); 

Answer 3

Vous faites une requête AJAX, ergo: la validation est déjà terminée fonctionne lorsque votre validateur personnalisé renvoie true ou false.

Vous aurez besoin de travailler avec async. Voir aussi ce message: How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

Disons que nous avons une validation personnalisée pour vérifier l'unique mobile, nous allons ajouter une nouvelle méthode comme suit pour vérifier l'unqiue pas Mobile:

jQuery.validator.addMethod("uniqueMobile", function(value, element) { 
    var response; 
    $.ajax({ 
     type: "POST", 
     url: <YOUR SERVER SCRIPT/METHOD>, 
     data:"mobile="+value, 
     async:false, 
     success:function(data){ 
      response = data; 
     } 
    }); 
    if(response == 0) 
    { 
     return true; 
    } 
    else if(response == 1) 
    { 
     return false; 
    } 
    else if(response == 'logout') 
    { 
     return false; 
    } 
}, "Mobile is Already Taken"); 

Answer 4

Pour Serverside validation AJAX utiliser la règle remote. C'est la même chose que l'objet de requête jQuery AJAX standard. Votre serveur doit renvoyer la chaîne "true" pour une valeur valide ou "false" pour invalide, il peut également transmettre une chaîne "This email was already taken", et cela sera perçu comme invalide, et afficher comme un message d'erreur:

$("#myform").validate({ 
    rules: { 
    email: { 
     required: true, 
     email: true, 
     remote: { 
     url: "check-email.php", 
     type: "post", 
     data: { 
      username: function() { 
      return $("#username").val(); 
      } 
     } 
     } 
    } 
    } 
}); 

documentation Lire ici remote-method