Question

我有一个通用的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）生成的默认“忘记密码”表单上实现此功能。

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

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

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

Answer 1

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

Answer 2

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

$('.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;
    }
});

Answer 3

以下是解决此问题的正确方法。在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响应。然后在后续请求中，当它执行常规表单发布时，它将执行忘记密码功能。

Laravel 5.4 - 忘记密码ajax验证

3 个答案: