模态在验证期间保持打开

Question

我正在使用模态 boostrap laravel 执行验证进行记录。通过 jquery ajax 发送数据实现它。我遇到的问题是按下提交按钮会关闭模式。您如何才能保持打开模式直到验证结束？谢谢

模态：

 <!--- Register Modal -->
     <div class="modal fade" id="Register" role="dialog">
      <div class="modal-dialog">

            <!-- Modal content-->
              <div class="modal-content">
                 <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Registro</h4>
          </div>
           <div class="modal-body">


           <form class="form" role="form" id="new-user" data-token="{{ Session::token() }}" method="post" >
                        {{ csrf_field() }}

               <div id="error">
                   <!-- error will be showen here ! -->
               </div>

                  <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                        <label for="name">Nombre completo: </label>
                       <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}">

                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                    </div>


                 <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                    <label for="email">Correo electronico: </label>
                    <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                </div>

                <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                     <label for="pwd">Contraseña:</label>
                     <input id="password" type="password" class="form-control" name="password">

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                 </div>

                   <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                        <label >Confirmar contraseña:</label>
                        <input id="cpassword" type="password" class="form-control" name="cpassword">

                                @if ($errors->has('password_confirmation'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                                    </span>
                                @endif
                   </div>

               <!-- <input type="hidden" name="_token" value="{{Session::token()}}"> seguridad -->
              <button type="submit" class="btn btn-default" id="Submit" >Registro</button>

                <div>
        <!-- boton login facebook-->
         <div>
            <a href="/login-facebook" class="login-facebook" </div><span data-reactid=".1.0.1.2.1:0">Facebook</span></a>
          </div>

        <!-- boton login google-->
           <div>
            <a href="/login-google" class="login-google" </div><span data-reactid="">Google</span></a>
          </div>
          </div>



        </form>

        </div>

      </div>

    </div>
  </div>

js:

function send(event){
    event.preventDefault();

        $.ajax({

            type: 'post',
            url: "{{url('/register')}}",
            data: {
                name: $('#name').val(),
                email: $('#email').val(),
                password: $('#password').val(),
                cpassword: $('#cpassword').val(),
                _token: $('#new-user').attr('data-token')
            },
             success: function (data) {
                  $("#error").fadeIn(1000, function () {

                    $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; ' + data + ' !</div>');

                });

               }

        });

}

Answer 1

我只想给你一个简单的验证示例。您可以按照自己的方式使用它 并隐藏模态只需添加$("#Your Modal ID ").modal("hide"); 如果您的模态ID 是注册然后使用$("#Register").modal("hide"); 它将关闭

function send(event){
    event.preventDefault();

   if((!$('#name').val())||(!$('#email').val())||(!$('#password').val()))
   {
    alert("Please Fill All The Details !")
    }
else{

        $.ajax({

            type: 'post',
            url: "{{url('/register')}}",
            data: {
                name: $('#name').val(),
                email: $('#email').val(),
                password: $('#password').val(),
                cpassword: $('#cpassword').val(),
                _token: $('#new-user').attr('data-token')
            },
             success: function (data) {
                  $("#error").fadeIn(1000, function () {

                    $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; ' + data + ' !</div>');


                });
                $("#Your Modal ID ").modal("hide");
               }

        });
   }
}

Answer 2

我不知道你是怎么调用send() js 函数的...所以我不知道你是否阻止了表单提交。无论如何：

您的模式不应在提交表单时关闭，除非表单确实正在发送并且您的页面重新加载。

为了防止您的表单被提交并重新加载当前页面：

$('#new-user').submit(function(e) { e.preventDefault; });

并在您的 ajax.success 函数中关闭模式尝试使用：

$('#Register').modal('hide');