Bootstrap Modal WordPress Login. Add PHP Condition when Username Empty

Solution: 

There are several ways to solve this problem:

1. The easy one:

Add “required” to the input field, this way the user is forced to enter the required fields and you don’t have to show the error code, like this:

                            <input type="text" name="log" id="user_login" class="form-control" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" placeholder="Enter email" required="required">

Might have compatibility issues with older browsers such as older versions of IE and some Safaris.

2. Use External validator: Bootstrap Validator

For me it’s the most complicated but at the same time the prettiest. Uses Javascript to validate the form, and works like:

• Include files;
• Add the JS code after the form to validate the fields.

__

3. Post to Self and sanitize data:

Another good way to do it, basically you change the action form:

action="<?php bloginfo('url') ?>/wp-login.php">

to:

action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>

Then receive the data by POST, verify if it’s empty and show an error or login the user using wp_signon

EDIT: Improved code

 <?php
//We shall SQL escape all inputs
        $username = esc_sql(isset($_REQUEST['log']) ? $_REQUEST['username'] : '');
        $password = esc_sql(isset($_REQUEST['password']) ? $_REQUEST['password'] : '');
        $remember = esc_sql(isset($_REQUEST['rememberme']) ? $_REQUEST['rememberme'] : '');

    if($remember) $remember = "true";
    else $remember = "false";
    $login_data = array();
    $login_data['log'] = $username;
    $login_data['user_password'] = $password;
    $login_data['remember'] = $remember;
    $user_verify = wp_signon( $login_data, false ); 
    //wp_signon is a wordpress function which authenticates a user. It accepts user info parameters as an array.
    if($_POST){
        if ( is_wp_error($user_verify) ) {
            $UserError = "Username or password don't match, please check again.";
        } else {

            $profile = "http://www.example.com/user-profile-page";
            wp_redirect( $profile ); exit;

        }
    } ?>

<div id="login-signup">
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"><?php _e('Close'); ?></span></button>
                    <h4 class="modal-title"><?php _e('Log In'); ?></h4>
                </div>
                <div class="modal-body">

        <?php // SHOW THE ERROR, IF $UserError HAS SOMETHING

if(!empty($UserError)) { ?>
                            <span class='error' style='color: #d20000; margin-bottom: 20px; font-size: 18px; font-weight: bold; float: left;'><?php echo $UserError; ?></span><div class='clearfix'></div>
        <?php } ?>

                    <form name="loginform" id="loginform" class="form-horizontal" role="form" method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" name="log" id="user_login" class="form-control" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" placeholder="Enter email">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" name="pwd" id="user_pass" class="form-control" value="" size="20" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label for="rememberme">
                                    <input type="checkbox" name="rememberme" id="rememberme" value="forever" checked="checked" /> <?php esc_attr_e('Remember Me'); ?> 
                                    <a class="pull-right" data-toggle="modal" data-target="#reset-password"><?php _e('Forget Password?'); ?></a>
                                </label>
                            </div>
                        </div>
                        <?php do_action('login_form'); ?>
                        <div class="form-group">
                            <input type="submit" name="wp-login" id="wp-login" value="<?php esc_attr_e('Log In'); ?>" class="btn btn-default" />
                            <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
                            <input type="hidden" name="user-cookie" value="1" />
                        </div>
                    </form>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Brief explanation of what is happening:

1. User fills and submits the form
2. As the post is being submitted to self, the 3 variables will be filled – username, password and remember me
3. We build a quick array with the user login data and send it to the function wp_signon
4. if everything is fine, the user is redirected to the profile page, logged in
5. if there’s an error, the variable $UserError will be filled and user not redirected
6. We added a condition to check if $UserError has something inside, if it does, it shows the message

The code could be better but serves the purpose.