Laravelでのブートストラップ・モード検証

Question

私はクリックで開くレジストラリオン・モーダルを持っています。入力は、が必要ですなどを使用して、ビューで検証されます。他にも、私のコントローラでルールを再度検証する他のフィールドもあります。

私は、モーダルを確認する良い方法はAJAXを使用していることを読んだことがあります。私はそれに苦労している。

これはjavascriptや他の人なしで提出された私の登録モーダルの簡略化verstionです：私が提出した場合

<div id="RegisterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
      <h4 class="modal-title" id="myModalLabel">Register</h4> 
     </div> 

     <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}"> 
      {!! csrf_field() !!} 

      <div class="modal-body"> 

       <div class="form-group{{ $errors->has('first_name') ? ' has-error' : '' }}"> 
        <label class="col-md-4 control-label">First name</label> 

        <div class="col-md-6"> 
         <input type="text" class="form-control" name="first_name" 
           value="{{ old('first_name') }}"> 
        </div> 
       </div> 

       <div class="form-group{{ $errors->has('last_name') ? ' has-error' : '' }}"> 
        <label class="col-md-4 control-label">Last name</label> 

        <div class="col-md-6"> 
         <input type="text" class="form-control" name="last_name" 
           value="{{ old('last_name') }}"> 
        </div> 
       </div> 

       <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}"> 
        <label class="col-md-4 control-label">E-Mail Address</label> 

        <div class="col-md-6"> 
         <input type="email" class="form-control" name="email" 
           value="{{ old('email') }}"> 
        </div> 
       </div> 

       <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}"> 
        <label class="col-md-4 control-label">Password</label> 

        <div class="col-md-6"> 
         <input type="password" class="form-control" name="password"> 
        </div> 
       </div> 

       <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}"> 
        <label class="col-md-4 control-label">Confirm Password</label> 

        <div class="col-md-6"> 
         <input type="password" class="form-control" name="password_confirmation"> 
        </div> 
       </div> 

      </div> 

      <div class="modal-footer"> 
       <div class="form-group"> 
        <div class="col-md-6 col-md-offset-2"> 
         <button name="RegisterButton" type="submit" class="btn btn-primary"> 
          <i class="fa fa-btn fa-user"></i> Register 
         </button> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

、モーダルが閉じ、何も起こりません。もう一度「登録」をクリックすると、エラーが表示されたモーダルが表示されます。

誰かが私を助けてくれますか？私に正しい方向を向ける？

Answer 1

私が理解している限り、フォームを正常に送信すると、ページがリロードされます。だからページがリロードされた後、再び「登録」をクリックしてモーダルを開き、エラーを正しく表示する必要があります。

このようなフォームを通常送信する場合は、エラーがあれば、自動的に（JavaScriptを使用して）モーダルを再度開く必要があります。このようなモーダルを開くことができます：

$('#modal').modal({show: true}); 

私はあなたの問題を正しく理解したと思います。

EDIT 1：エラーが発生した場合、モーダルを開き、次のコードを使用する：

@if(Session::has('errors')) 
<script> 
$(document).ready(function(){ 
    $('#modal').modal({show: true}); 
} 
</script> 
@endif 

EDIT 2：AJAXを介してフォームを送信し、直接モーダルにエラーを表示する：

<?php 

public function register() 
{ 
    ... 

if($Validator->fails()) 
{ 
    $json = new stdClass(); 
    $json->success = false; 
    $json->errors = $Validator->errors(); 
} 
else 
{ 
    $json = new stdClass(); 
    $json->success = true; 
} 

return Response::json($json); 
} 

?> 


<script> 
$('#registerForm').submit(function(){ 

var url = {{ route('myRegisterRoute') }}; 
var data = $('#registerForm').serialize(); 

$.post(url, data, function(response){ 
    if(response.success) 
    { 
     // Print success message and close modal 
    } 
    else 
    { 
     $('#registerForm errorList').html(JSON.stringify(response.errors)); 
    } 
}); 

// return false to stop the normal submission 
return false; 
}); 
</script>