Laravel 5.4 - 忘记密码AJAX验证

问题描述：

我有一个通用的AJAX表单提交JS类：Laravel 5.4 - 忘记密码AJAX验证

$(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 scaffold（resources/views/auth/passwords/email.blade.php）生成的默认“忘记密码”表单上实现此功能。

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

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

我只想要AJAX提交来执行验证。如果验证成功，它应该（像目前一样）执行一个将发送电子邮件的正常表单提交。

显示您的控制器 –

您可以使用'preventDefault（）'函数来防止此行为。 –

@PankitGami - 默认生成的控制器：https：//github.com/laravel/laravel/blob/master/app/Http/Controllers/Auth/ForgotPasswordController.php – GSTAR

答

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

答

是否要保留Ajax提交但删除正常表单提交？如果是这样那么假设你有一个按钮来提交表单，你可以保持形式在这个答案提交： Want html form submit to do nothing

不，我希望AJAX提交仅用于验证。只有在验证成功的情况下才会正常提交。 – GSTAR

答

这是一种正常的行为造成的，只要表单提交，以防止这一点，你可以使用preventDefault()功能，像这样：

$('.ajax-form').submit(function(event) { 
    event.preventDefault(); 

    ... 
}

答

如果我理解正确的问题，您需要去防止默认行为和验证，如果一切进行验证，恢复默认的表单行为提交数据。

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

Laravel 5.4 - 忘记密码AJAX验证

相关推荐