유효성 검사 도중 모달을 열어 두십시오.

Question

유효성 검사를 수행하는 모달 부스트랩 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");를 사용하고 send() JS 함수를 호출 어떻게

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

을 나도 몰라 닫습니다입니다 .. 그래서 양식 제출을 막는 지 모르겠습니다. 어쨌든 :

양식이 실제로 전송되고 페이지가 다시로드되는 경우를 제외하고 양식을 제출할 때 모달을 닫아서는 안됩니다. 사용하려고

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

을 그리고 당신의 ajax.success 기능에 모달을 닫습니다 :

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