web-dev-qa-db-fra.com

Comment vérifier la disponibilité du nom d'utilisateur avec ajax lors de l'enregistrement

J'utilise buddypress qui utilise son propre modèle register.php pour l'enregistrement à l'adresse http://mysite.com/register . Je cherche un moyen de montrer à l'utilisateur si son nom d'utilisateur entré est disponible ou non à l'aide de la validation ajax. Voici un extrait du formulaire.

<?php do_action( 'template_notices' ) ?>
<?php do_action( 'bp_before_account_details_fields' ) ?>
   <div class="register-section" id="basic-details-section">
      <?php /***** Basic Account Details ******/ ?>
  <?php do_action( 'bp_signup_username_errors' ) ?>
  <input type="text" name="signup_username" id="signup_username" value="Username" />
  <?php do_action( 'bp_signup_email_errors' ) ?>
  <input type="text" name="signup_email" id="signup_email" value="Email" />
   </div><!-- #basic-details-section -->
ajaxuser-registrationusername
1
Pollux Khafra

Le code non testé suivant devrait vous aider à démarrer. En gros, vous ajoutez une cible d'affichage à votre formulaire, ajoutez du javascript pour ajouter la validation lorsque l'utilisateur quitte le champ nom d'utilisateur, ainsi que le code côté serveur permettant de mettre en file d'attente le javascript et d'enregistrer les actions ajax.

Faites-moi savoir ce qui casse, comme je suis sûr que cela ne sera pas épuisé.

 [! - HTML à ajouter au formulaire d'inscription après nom_utilisateur (remplacez les crochets par un angle) -] 
 [Div id = "validate_user_login_results"] [/ div] 

 
 ## contenu de validate_login.js 
 ## 
 jQuery (document) .ready (function () {
 jQuery ('body. login div # formulaire de login # loginform input # user_login '). onblur (function () {
 jQuery.post (ajaxurl 
, {
' action ':' validate_user_login ', 
 'nom d'utilisateur': $ ('body.login div # formulaire de login # loginform input # user_login'). val () 
} 
, fonction (réponse) {
 var res = wpAjax.parseAjaxResponse (réponse, 'ajax-response'); 
 jQuery.each (res.responses, function () {
 $ ('# validate_user_login_results'). load ($ this.data); 
 $ ("# validate_user_login_results"). fadeIn ("fast"); 
 ## if $ this.data == 'OK', puis action de succès, sinon action d'échec 
 } 
} 
); 
}); 
}); 
 

 // ajouter au plugin de site ou functions.php 
 // 
 function wpse64865_add_validate_login_js () {
 wp_enqueue_script ('validate_login.js' 
, get_bloginfo ('template_directory') 
. "/scripts/validate_login.js" // modifie cela pour localiser correctement javascript 
, array ('jquery', 'wp-ajax-response')); 
} 
 add_action ('init', 'wpse64865_add_validate_login_js'); 'wp_ajax_validate_nopriv_user_login', 'wpse64865_ajax_validate_user_login'); 
 
 fonction wpse64865_ajax_validate_user_login () {...] = $ _REQUEST ['nom d'utilisateur']; 
 
 If (validate_username ($ username)) {
 $ Response = array ('what' => 'validate_user_login', 
 'action' => 'validate_user_login_results', 
 'id' => '1', 
 'data' => 'Non OK' // la connexion existe 
); 
} else {
 $ response = array ('what' => 'validate_user_login', 
 'action' => 'validate_user_login_results', 
 ' id '=>' 1 ', 
' data '=>' OK '// échec de la vérification, connexion inexistante 
); 
} 
 $ xmlResponse = new WP_Ajax_Response ($ response); 
 $ xmlResponse-> send (); 
}

Edit: ajout du point-virgule manquant au code de functions.php

4
marfarma