Show errors on custom login form

2 comments

1. I’m using this kind of code which seems to work (with wp_signon).

   <?php
   /*
   Template Name: Connexion
   */
   global $user_ID;
   
   if (!$user_ID) {
   
       if($_POST){
   
           $username = $wpdb->escape($_REQUEST['username']);
           $password = $wpdb->escape($_REQUEST['password']);
           $remember = $wpdb->escape($_REQUEST['rememberme']);
   
           if($remember) $remember = "true";
           else $remember = "false";
           $login_data = array();
           $login_data['user_login'] = $username;
           $login_data['user_password'] = $password;
           $login_data['remember'] = $remember;
           $user_verify = wp_signon( $login_data, false ); 
   
           if ( is_wp_error($user_verify) ) 
           {
              echo "<p class='error'>Identifiant ou mot de passe incorrect. Merci d'essayer &agrave; nouveau !</p>";
              exit();
            } else 
            {  
               echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
               exit();
             }
       } else { 
   
   get_header();
   
   ?>
   
   <div id="content" role="main">
   <section id="page" class="alignleft">
   
       <!-- Si déjà connecté, redirection vers accueil -->
       <?php if (is_user_logged_in()) { ?>
           <?php wp_redirect( 'http://letouriste.fr/', 302 ); exit; ?>
       <?php } else { ?>
   
       <!-- Si pas connecté, formulaire de connexion -->
       <div class="alignleft">
           <h2 class="section-title alignleft">
               <span class="title"><?php the_title(); ?></span>
           </h2>
   
           <!-- Affichage des erreurs si besoin -->        
           <div id="result"></div> 
   
           <form method="post" id="loginform" name="loginform">
               <p class="login-username">
                   <label for="user_login">Identifiant</label>
                   <input type="text" tabindex="10" size="20" value="" name="username" class="input" id="user_login" name="log">
               </p>
               <p class="login-password">
                   <label for="user_pass">Mot de passe</label>
                   <input type="password" tabindex="20" size="20" value="" name="password" class="input" id="user_pass" name="pwd">
               </p>
               <p class="login-remember"><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme"> Se souvenir de moi</label></p>
               <p class="login-submit">
                   <input type="submit" tabindex="100" value="Se connecter" class="button-primary" id="wp-submit" name="wp-submit">
                   <input type="hidden" value="http://letouriste.fr/" name="redirect_to">
               </p>
           </form>     
   
           <!-- Script de vérification des erreurs --> 
           <script type="text/javascript">                         
           $("#wp-submit").click(function() {
   
           $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loading.gif" class="loader" />').fadeIn();
           var input_data = $('#loginform').serialize();
           $.ajax({
           type: "POST",
           url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
           data: input_data,
           success: function(msg){
           $('.loader').remove();
           $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
           }
           });
           return false;
   
           });
           </script>
   
       </div>
   
       <!-- Lien de création de compte --> 
       <div class="alignright">
   
           <h2 class="section-title alignleft">
               <span class="title">S'enregistrer</span>
           </h2>
   
           <p>Toujours pas inscrit ? <a title="Créer un compte Le Touriste" href="http://letouriste.fr/enregistrement/">Cr&eacute;er un compte gratuitement</a> en 30 secondes chrono !</p>
   
       </div>
   
       <?php } ?>
   
   </section>
   
   </div>
   
   <?php get_footer(); } } else {
   echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
   
   }
   ?>
   

   Log in to Reply

2. Assuming you are using wp_signon, simply check if the returned object is a WP_Error instance, evaluate the WP_Error::get_error_code(), and output appropriate HTML/CSS that your form needs to flag errors.

   Basic, untested sample code to illustrate the principle:

   <?php
   $user = wp_signon();
   $loginError = $user instanceof WP_Error;
   ?>
   
   <input name='log' type='text' />
   <?php
   if($loginError && $user->get_error_code() === 'invalid_username')
   {
       echo $user->get_error_message();
   }
   ?>
   
   <input name='pwd' type='password' />
   <?php
   if($loginError && $user->get_error_code() === 'incorrect_password')
   {
       echo $user->get_error_message();
   }
   ?>
   

   Log in to Reply