Bootstrap modal validation in Laravel

Question

У меня есть мода регистрации, которая открывается по щелчку. Входы проверяются на вид с использованием и т. Д. Вещь есть, есть другие поля (также в других моделях, которые я не упоминал), в которых я снова проверяю правила в своем контроллере.

Я читал, что хороший способ проверки модалов использует AJAX. Мне сложно с этим справиться.

Это упрощенная verstion моей регистрации модальный, который представлен без Javascript или других:

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

Когда я представляю, модальные закрывается и ничего не происходит. Если я снова нажму «register», модальные покажут с ошибками.

Может ли кто-нибудь помочь мне? Направьте меня в правильном направлении?

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>