提出時にモーダルクローズを防止する（Laravel/Bootstrap）

Question

これは簡単な解決策ではありません。間違っているとわくわくするでしょう。要するに は、モーダルダイアログは、ユーザが、失敗したが、まだ閉じモーダルする原因にフィールド検証を提出する非一意の値を入力し、ポップアップ表示：

<div class="modal fade" id="newtargetModal" 
     tabindex="-1" role="dialog" 
     aria-labelledby="newtargetModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header">Target (e.g. hostname) 
       <button type="button" class="close" 
        data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span></button> 
      </div> 
      <div class="modal-body"> 
       @include('applications.add') 
      </div> 
     </div> 
     </div> 
    </div> 

インクルードには、（applications.add）：

{!! Form::open(['method'=> 'POST', 'action'=> 'supportedAppsController@store', 'class'=>'form-horizontal']) !!} 
{{csrf_field()}} 
<div class="form-group{{ $errors->has('app_name') ? ' has-error' : 'unique:supported_apps:app_name' }}"> 
<label for="app_name" class="col-md-4 control-label">Name</label> 
<div class="col-md-8"> 
    <input id="app_name" type="text" class="form-control" name="app_name" style="margin-bottom: 10px" 
      value="{{ old('app_name') }}" required autofocus> 
    @if ($errors->has('app_name')) 
     <span class="help-block"> 
      <strong>{{ $errors->first('app_name') }}</strong> 
      </span> 
    @endif 
</div> 
</div> 
<input type="submit" name="submit" class=" btn-primary" value="Add"> 
{!! Form::close()!!} 

「追加」ボタンを押したときに検証によってapp_nameが一意でないと判明した場合、モーダルは終了します。再オープンすると、$エラー処理に "The app name was already taken"というフラグが立てられていることがわかります。 インクルードは別のコードで使用されます（モーダルではありません）。 case $ errorが設定されている場合に、Addボタンがモーダルを閉じないようにする方法があるかどうか疑問に思った。 このアドバイスを事前にお寄せいただきありがとうございます。 ケビン

編集：

私は次のことを試してくださいました：

$(document).ready() 
      { 
       @if(count($errors)>0) 
        $('#newtargetModal').modal('show'); 
       @endif 
      } 

しかし、私は自分の質問に答えることをしたくない、まだ...それは生意気な解決策と思われるが、私はテストしていませんでした十分です。最初のテストでは、ダイアログをポップアップする問題を回避することができます。

Answer 1

フォームを送信してページの再読み込みやエラー時のリダイレクトを防止するには、ajax経由で送信する必要があります。そうすれば、エラーを見ることができます。

$(document).on('mousedown touch', ':submit', function() { 
    //alert($(this).val()); 
    var form = $("form"); 

    $.ajax({ 
     async: false, 
     type: 'POST', 
     url: 'your route', 
     headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" }, 
     data: form.serializeArray(), 
     dataType: 'json', 
     success: function(data){ 
      console.log('validated!'); 
     }, 
     error: function(data) { 
      var errors = data.responseJSON; 
      var errorsArr = []; 

      for (error in errors) { 
       errorsArr.push(errors[error][0]); 
      } 

      swal({text: "<strong class='text-danger'>" + errorsArr.join("<br>") + "</strong>"}); 
      console.log("validation failed"); 
     } 

    }); 
}); 

私はsweetalert 2プラグインを使用していますので、あなたのニーズに合わせて調整する必要があります。