modal在验证过程中保持打开状态

Question

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

模式：

<!--- 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

我不知道你是怎么调用JS send()功能..所以我不知道你是否阻止表单提交。无论如何：

您的模态不应该在提交表单时关闭，除非表单真的被发送并且您的页面重新加载。

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

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

，并关闭模式在ajax.success功能尝试使用：

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