Question

我想创建一个登录 - 注册表单，使用html <form>和bootstrap4模式。一切都没问题，但是当我点击提交按钮时，模态被解除，因此无法为客户显示数据验证格式的错误。现在，当我点击提交按钮时，如何保持模态显示？

<a class='nav-link account-active' href='#' data-toggle="modal" data-target="#my_account"></a>

<div class="modal fade" id="my_account" style='height: auto' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="flase">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <ul class="nav nav-tabs w-100" role="tablist">
                    <li class="nav-item w-50">
                        <a href="#login" class="nav-link text-center active" data-toggle="tab">LOGIN</a>
                    </li>
                    <li class="nav-item w-50">
                        <a href="#register" class="nav-link text-center" data-toggle="tab">SIGN UP</a>
                    </li>
                </ul>
            </div>

            <div class="tab-content" style="font-size: 14px;">
                <div id="login"  class="tab-pane active" style='height: 550px'>
                    <form method='post' action=''>
                    <h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel">WELCOME BACK!</h4>
                    <h6 class="text-center text-muted">Login to your account</h6>
                    <div class="error" id='signin_err'>{signin_err}</div>
                    <div class='section-input'>
                        <div class="mt-2">Email</div>
                        <input type="text" class="form-control w-100 my-2" name="" autofocus>
                    </div>
                    <div class='section-input'>                     
                        <div class="mt-2">Password</div>
                        <input type="text" class="form-control w-100 my-2" name="">
                    </div>
                    <div class='section-input'>
                        <button class="btn btn-primary w-100 my-3" type="submit" name="signin_btn">LOGIN</button>
                    </div>
                    </form>

                        <div class="forgot text-center mb-3">forgot your password?</div>

                </div>
                <div id="register" class="tab-pane" style='height: auto'>
                    <h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel" style='text-transform: uppercase;'>It's as easy as sunday morning</h4>
                    <h6 class="text-center text-muted">Sign up now</h6>

                    <div class='error' id='signup_err'>{signup_err}</div>

                    <div class='section-input' style="margin-top: 70px">

                        <div class="mt-2" id='signUp_name'>Name</div>
                        <input type="text" class="form-control w-100 my-2" name="name" autofocus >
                    </div>
                    <div class='section-input'>
                        <div class="mt-2" id='signUp_mail'>Email</div>
                        <input type="text" class="form-control w-100 my-2" name="mail" id='mail' >

                    </div>

                    <div class='section-input'>
                        <div class="mt-2" id='signUp_psd'>Password</div>
                        <input type="text" class="form-control w-100 my-2" name="psd" >
                    </div>

                    <div class='section-input'>
                        <div class="mt-2" id='confirm_psd'>Confirm password</div>
                        <input type="text" class="form-control w-100 my-2" name="psd_cf" >
                    </div>



                    <div class='section-input'>
                        <button class="btn btn-primary w-100 my-3" style='height:48px;margin-bottom:100px;border-radius: 0' type="" name="signup_btn">SIGN UP</button>
                    </div>

                    <div style='height:70px'></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我不知道你的后端是如何实现的，但根据你的代码，我的猜测是你每次点击提交时都会刷新你的页面，因为空行动。我没有看到模态将关闭的其他方式。

如果您想在不刷新的情况下显示任何验证，则需要通过AJAX提交。

单击“提交”时保持模态显示

1 个答案: