2017-02-03 3 views
0

Я работаю с Symfony 3 + FOSUserBundle + Bootstrap модальныйпредставления формы с помощью AJAX/Detect проверки erros

Рабочая часть:

загружаю регистрационную форму FOSUserBundle в модальном

я представляю форма с помощью AJAX

Если форма имеет ошибки проверки, ошибки отображаются в модальном

Моя проблема: Когда форма действительна, она показывает мою домашнюю страницу внутри модального

Вопрос: Как обнаружить в Ajax вызывается, если моя форма имеет неточности или если форма является действительным? Потому что оба успеха возвращения для Ajax

Надеюсь, что я понятен ... спасибо за вашу помощь !!

Вот код

запустить модальное:

<a data-toggle="modal" href="#myModalLogin">Connexion</a> 
 

 
<!-- Modale Login --> 
 
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body" id="myModalLoginBody"> 
 
       {{ render(url('fos_user_security_login')) }} 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

содержание модальный (выдержка только)

... 
 
<div class="container-fluid form-box"> 
 
\t <div class="row text-center"> 
 
\t \t <form action="{{ path("fos_user_security_check") }}" method="post" id="formLogin"> 
 
\t  <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" /> 
 

 
\t  <div class="form-group"> 
 
\t   <input type="text" id="username" name="_username" placeholder="Email ou Nom d'utilisateur" value="{{ last_username }}" /> 
 
\t  
 
\t   <input type="password" id="password" name="_password" placeholder="{{ 'security.login.password'|trans }}" /> 
 
\t  </div> 
 
\t  
 
\t  <button type="submit" class="btn" id="_submit" name="_submit"> {{ 'security.login.submit'|trans }}</button> 
 
\t \t </form> 
 
\t </div> 
 
</div> 
 
...

AJAX

$("#formLogin").submit(function (e){ 
 
    e.preventDefault(); 
 
    $form = $(e.target); 
 
    $.ajax($form.attr('action'), { 
 
     data: $form.serialize(), 
 
     type: "POST", 
 
     success: function(data) { 
 
     \t // HERE IS THE ISSUE 
 
     \t // My Modal is refresh to show validation errors => OK 
 
     \t // But if no validation errors : user is logged inside the modal and homepage appear inside the modal 
 
      $('#myModalLoginBody').html(data); 
 
     }, 
 
     error: function() { 
 
      $('#myModalLoginBody').html("Une erreur est survenue, veuillez réessayer plus tard"); 
 
     } 
 
    }); 
 
});

ответ

0

Я нашел решение, но не уверен, что это действительно чистый ... Так что если у вас есть лучшее предложение, пожалуйста, не стесняйтесь!

Решение:

В моей форме у меня есть определенный класс для сообщений об ошибках:

{% if error %} 
 
    <span class="help-block"> 
 
    <ul class="list-unstyled"> 
 
    <li><span class="glyphicon glyphicon-exclamation-sign"></span> 
 
    \t {{ error.messageKey|trans(error.messageData, 'security') }} 
 
    </li> 
 
    </ul> 
 
    </span> 
 
{% endif %}

Так в AJAX я проверить, если загружен этот класс:

// PopIn login via AJAX 
 
$("#formLogin").submit(function (e){ 
 
    e.preventDefault(); 
 
    $form = $(e.target); 
 
    $.ajax($form.attr('action'), { 
 
     data: $form.serialize(), 
 
     type: "POST", 
 
     success: function(data) { 
 
      if(data.search('help-block') > 0) 
 
      { 
 
      // Recharge la modal pour afficher les erreurs 
 
      $('#myModalLoginBody').html(data); 
 
      }else{ 
 
      window.location.reload(); 
 
      } 
 
     }, 
 
     error: function() { 
 
      $('#myModalLoginBody').html("Une erreur est survenue, veuillez réessayer plus tard"); 
 
     } 
 
    }); 
 
});

Так знаю, что могу перезагрузить модальность, чтобы показать ошибки или перезагрузить страницу, чтобы закрыть модальный и подключения пользователя!

Смежные вопросы