Bootstrap Modal Validierung in Laravel

Question

Ich habe eine Registration Modal, die auf Klick öffnet. Die Eingaben werden über die View validiert mit erforderlich usw. Das ist, da gibt es andere Felder (auch in anderen Modalitäten die ich nicht erwähne) in denen ich nochmal Regeln in meinem Controller validiere.

Ich habe gelesen, dass eine gute Möglichkeit zur Validierung von Modalitäten AJAX verwendet. Ich habe eine schwere Zeit damit.

Dies ist eine vereinfachte verstion meiner Anmeldung modal, die ohne Javascript oder andere vorgelegt wird:

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

Wenn ich vorlegen, die modalen schließt und nichts passiert. Wenn ich erneut auf "Registrieren" klicke, wird das Modal mit den Fehlern angezeigt.

Kann mir jemand helfen? Richte mich in die richtige Richtung?

Answer 1

Soweit ich das verstanden habe, senden Sie Ihr Formular normal, was die Seite neu lädt. Nachdem Sie die Seite neu geladen haben, müssen Sie erneut auf "Registrieren" klicken, um das Modal zu öffnen, das alle Fehler korrekt anzeigt.

Wenn Sie das Formular wie folgt senden möchten, müssen Sie das Modal automatisch (mit Javascript) öffnen, falls es einen Fehler gibt. Sie können ein Modal wie folgt öffnen:

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

Ich hoffe, ich habe Ihr Problem richtig verstanden.

EDIT 1: die modale zu öffnen, wenn ein Fehler auftritt, verwenden Sie den folgenden Code ein:

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

EDIT 2: das Formular über AJAX zu unterwerfen und die Fehler in der modal direkt anzeigen:

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