verhindern modal close on submit (Laravel/Bootstrap)

Question

Ich sehe keine einfache Lösung für diese, so wird gechuffed sein, wenn bewiesen, falsch. Kurz gesagt, modaler Dialog erscheint, Benutzer einen nicht eindeutigen Wert eingibt, Ursachen Feldüberprüfung vorlegen, aber immer noch schließt zum Scheitern verurteilt modal:

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

die umfassen (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()!!} 

Wenn bei der Validierung festgestellt wird, dass app_name nicht eindeutig sein soll, wenn die Schaltfläche "Hinzufügen" gedrückt wird, wird das Modal geschlossen. Beim erneuten Öffnen ist zu sehen, dass die $ error-Behandlung mit "Der App-Name wurde bereits vergeben" versehen ist. Das Include wird in einem anderen Codeteil (nicht in einem Modal) verwendet. Ich fragte mich, ob es eine Möglichkeit gibt, die Add-Schaltfläche zu verhindern, die das Modal schließt, wenn $ error gesetzt ist. Vielen Dank im Voraus für einen Hinweis zu diesem Thema. Kevin

Edit:

Ich versuche tat folgendes:

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

Aber ich will nicht meine eigene Frage beantworten, doch .. Es scheint eine freche Lösung, aber ich habe nicht getestet es reicht. Erster Test schlägt vor, dass es das Problem des Popups des Dialogs back up ....

Answer 1

Um das Formular zu übermitteln und zu verhindern, dass die Seite neu laden oder bei Fehler umleiten müssen Sie es über Ajax senden. Auf diese Weise können Sie die Fehler sehen.

$(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"); 
     } 

    }); 
}); 

Ich benutze Sweetalert 2 Plugin für diese, so dass Sie diesen Teil an Ihre Bedürfnisse anpassen müssen, aber das ist es.