password input on modal makes modal disappear

Question

The html for a modal popup for a login is below (html). When a customer tries to login they must click on each input field, put the username and then password and click the submit submit button. If they click "enter" after inputting the username or login, the modal popup disappears.

Is there a way to have proceed to being logged in when clicking "enter/return" after in the password input box instead of clicking on the "Login" button. I would like both to work-- login button and hitting return after typing in the password.

  <ul class="nav navbar-nav navbar-right">
      <li><a href="#customer-login" role="button" data-toggle="modal" data-target="#customer-login"><span class="glyphicon glyphicon-forward"></span> Login</a>
      </li>
  </ul>
<div class="modal fade" id="customer-login" tabindex="-1" role="dialog" aria-labelledby="customer-login-header" aria-hidden="true">
    <div class="modal-dialog">
        <form action="https_link" method="POST" name="log-in">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h2 id="customer-login-header">Customer Login</h2>
                    <p class="hidden-xs">Log in below to receive access to your existing policies and quotes.  The log in information was emailed to your after purchasing your policy or saving a quote.</p>
                </div>
                <div class="modal-body">
                    <fieldset>
                        <input type="text" class="form-control" id="cl_username" name="username" placeholder="Username?">
                        <br>
                        <input type="password" class="form-control" id="cl_password" name="password" placeholder="Password?">
                </fieldset>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <input type="submit" class="btn btn-primary" value="Login">
                </div>
                <div class="modal-footer">
                    <p>Forgot your Username or Password?<br><a class="forgot-password" href="https://www.mexpro.com/client_login/retrieve_password.mhtml?aff_id=2149&amp;lang=en&amp;agtdst=www">Click here to Retrieve &raquo;</a></p>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

Here is a possible solution: https://jsfiddle.net/99x50s2s/73/

When the user clicks on the Login button, alert will be displayed if either User Name or Password is left blank.

I have made minor changes in your HTML and used jquery as shown below,

HTML:

<button type='button' data-toggle="modal" data-target="#customer-login" data-backdrop="static">Click here</button>

<div class="modal fade" id="customer-login" tabindex="-1" role="dialog" aria-labelledby="customer-login-header" aria-hidden="true">
    <div class="modal-dialog">
        <form action="https://www.mexpro.com/client_login/do/login.mhtml?aff_id=2149" method="POST" name="log-in">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h2 id="customer-login-header">Customer Login</h2>
                    <p class="hidden-xs">Log in below to receive access to your existing policies and quotes.  The log in information was emailed to your after purchasing your policy or saving a quote.</p>
                </div>
                <div class="modal-body">
                   <div id='error' class='alert alert-warning hide'></div>    
                    <fieldset>
                        <input type="text" class="form-control" id="cl_username" name="username" placeholder="Username?"/>
                        <br/>
                            <input type="password" class="form-control" id="cl_password" name="password" placeholder="Password?"/>
                </fieldset>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <input type="submit" class="btn btn-primary" value="Login" id="SubmitBtn"/>
                </div>
                <div class="modal-footer">
                    <p>Forgot your Username or Password?<br/><a class="forgot-password" href="https://www.mexpro.com/client_login/retrieve_password.mhtml?aff_id=2149&amp;lang=en&amp;agtdst=www">Click here to Retrieve &raquo;</a></p>
                </div>
            </div>
        </form>
    </div>
</div>

JS

$('#SubmitBtn').on('click', function(event){
    var errorDiv = $('#error');
    errorDiv.addClass('hide').empty();

    var userName = $('#cl_username').val();
    var password = $('#cl_password').val();
    if ($.trim(userName) == '' || $.trim(password) == '')
    {
      errorDiv.removeClass('hide').append('User Name and Password is required');
      event.preventDefault();
    }
});

Answer 2

1.) Is there a way to make an error show up if they hit return without typing anything?

Yes. Handle the onSubmit event on the form and validate that you have entries in the fields you want.

2.) Is there a way to have proceed to next step when clicking "enter/return" -- i.e. cursor moves to the password/and submit takes place?

Change the Login button from type="submit" to type="button" and write javascript code to handle the onClick event. By having it as type="submit" the browser automatically submits the form when the Enter key is pressed.

Bear in mind that many users expect the Enter key to submit a login form, not move them between fields. What you are trying to do goes against expected browser behavior.