Question

我使用Symfony 3 + FOSUserBundle + Bootstrap模式

工作部分：

我在模态

中加载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">
	<div class="row text-center">
		<form action="{{ path("fos_user_security_check") }}" method="post" id="formLogin">
	    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />

	    <div class="form-group">
	        <input type="text" id="username" name="_username"  placeholder="Email ou Nom d'utilisateur" value="{{ last_username }}" />
	    
	        <input type="password" id="password" name="_password" placeholder="{{ 'security.login.password'|trans }}" />
	    </div>
	    
	    <button type="submit" class="btn" id="_submit" name="_submit"> {{ 'security.login.submit'|trans }}</button>
		</form>
	</div>
</div>
...

AJAX

$("#formLogin").submit(function (e){
    e.preventDefault();
    $form = $(e.target);
    $.ajax($form.attr('action'), {
        data: $form.serialize(),
        type: "POST",
        success: function(data) {
        	// HERE IS THE ISSUE
        	// My Modal is refresh to show validation errors => OK
        	// 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");
        }
    });
});

Answer 1

我找到了一个解决方案，但不确定它真的很干净...... 所以，如果你有更好的建议，请不要犹豫！

解决方案：

在我的表单中，我有一个特定的错误消息类：

{% if error %}
   <span class="help-block">
   <ul class="list-unstyled">
   <li><span class="glyphicon glyphicon-exclamation-sign"></span> 
    	{{ 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");
        }
    });
});

所以知道我可以重新加载模态以显示错误或重新加载页面以关闭模态并连接用户！

通过AJAX / Detect验证错误提交表单

1 个答案: