Question

登录模式弹出窗口的html低于（html）。当客户尝试登录时，他们必须单击每个输入字段，输入用户名和密码，然后单击提交提交按钮。如果他们在输入用户名或登录后单击“输入”，则模态弹出窗口将消失。

在密码输入框中点击“输入/返回”后，有没有办法继续登录，而不是点击“登录”按钮。我希望两者都能工作 - 登录按钮并在输入密码后点击返回。

  <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

这是一个可能的解决方案：https://jsfiddle.net/99x50s2s/73/

当用户点击“登录”按钮时，如果“用户名”或“密码”留空，则会显示警告。

我对您的HTML进行了细微更改并使用了jquery，如下所示，

<强> 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。）如果他们在没有输入任何内容的情况下点击返回，是否有办法显示错误？

是。处理表单上的onSubmit事件，并验证您在所需的字段中是否有条目。

2。）点击＆＃34;进入/返回＆＃34;是否有办法进入下一步 - 即光标移动到密码/并提交放置？

从类型=＆＃34更改登录按钮;提交＆＃34;输入=＆＃34;按钮＆＃34;并编写javascript代码来处理onClick事件。将其设为type =＆＃34;提交＆＃34;当按下Enter键时，浏览器会自动提交表单。

请记住，许多用户希望Enter键提交登录表单，而不是在字段之间移动。你想要做的是违背预期的浏览器行为。

模态上的密码输入使模态消失

2 个答案: