首页 文章

Laravel 5.4 - 忘记密码ajax验证

提问于
浏览 次
-1

我有一个通用的AJAX表单提交JS类：

$(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('.ajax-form').submit(function() {
        var form = $(this);
        var url = form.attr('action');
        var data = form.serialize();

        if (!form.hasClass('valid')) {
            $.ajax({
                url: url,
                type: 'post',
                data: data,
                dataType: 'json',
                success: function(result) {
                    $('.field').removeClass('has-error');
                    form.addClass('valid');
                    form.submit();
                },
                error: function(result) {
                    var errors = result.responseJSON;

                    $('.field').removeClass('has-error');

                    $.each(errors, function(key, value) {
                        var field = $('.field.' + key);
                        field.addClass('has-error').children('.error-message').text(value[0]);
                    });
                }
            });

            return false;
        }
    });
});

这适用于所有表单上的AJAX验证 . 我现在正尝试在使用auth脚手架（ resources/views/auth/passwords/email.blade.php ）生成的默认"forgot password"表单上实现此功能 .

<form class="ajax-form" method="POST" action="{{ route('password.email') }}">
...
</form>

虽然AJAX验证在这里工作，但我遇到的问题是，当验证通过时，它还执行“忘记密码”功能 . 所以基本上它发送重置密码电子邮件两次（一次在AJAX提交期间，一次在正常表单提交期间） .

我只希望AJAX提交执行验证 . 如果验证成功，它应该（正如目前所做的那样）执行将发送电子邮件的正常表单提交 .

laravel laravel-5.4

3 回答

  • 0

    您是否希望保持Ajax提交但删除正常表单提交？如果是，那么假设您有一个提交表单的按钮，您可以在此答案中保持表单提交：Want html form submit to do nothing

    回复于
  • -1

    如果我正确理解了该问题，您需要阻止表单默认行为并验证，如果所有内容都经过验证，请恢复默认表单行为以提交数据 .

    $('.ajax-form').submit(function(evt) {
    evt.preventDefault(); // This would prevent default form submission functionality
    var form = $(this);
    var url = form.attr('action');
    var data = form.serialize();

    if (!form.hasClass('valid')) {
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            dataType: 'json',
            success: function(result) {
                $('.field').removeClass('has-error');
                form.addClass('valid');                
                form.unbind('submit').submit(); // Submit the Form If everything is validated
            },
            error: function(result) {
                var errors = result.responseJSON;

                $('.field').removeClass('has-error');

                $.each(errors, function(key, value) {
                    var field = $('.field.' + key);
                    field.addClass('has-error').children('.error-message').text(value[0]);
                });
            }
        });

        return false;
    }
});
    回复于
  • 0

    这是解决此问题的正确方法 . 在 Auth\ForgotPasswordController 中覆盖 sendResetLinkEmail 函数，如下所示：

    /**
 * Send a reset link to the given user.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\RedirectResponse
 */
public function sendResetLinkEmail(Request $request)
{
    $this->validate($request, ['email' => 'required|email']);

    // Inserted this piece of code which checks for AJAX request
    if ($request->ajax()) {
        return response()->json();
    }

    // We will send the password reset link to this user. Once we have attempted
    // to send the link, we will examine the response then see the message we
    // need to show to the user. Finally, we'll send out a proper response.
    $response = $this->broker()->sendResetLink(
        $request->only('email')
    );

    return $response == Password::RESET_LINK_SENT
                ? $this->sendResetLinkResponse($response)
                : $this->sendResetLinkFailedResponse($request, $response);
}

    通过执行 if ($request->ajax()) ，我们允许它检查ajax请求并仅返回json响应 . 然后在后续请求中，当它执行常规表单发布时，它将执行忘记密码功能 .

    回复于

相关问题