2017-04-26 197 views
-1

我有一個通用的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提交來執行驗證。如果驗證成功,它應該(像目前一樣)執行一個將發送電子郵件的正常表單提交。

+0

顯示您的控制器 –

+0

您可以使用'preventDefault()'函數來防止此行爲。 –

+0

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

回答

-1

以下是解決此問題的正確方法。在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響應。然後在隨後的請求中,當它執行常規表單發佈時,它將執行忘記的密碼功能。

0

是否要保留Ajax提交但刪除正常表單提交?如果是這樣那麼假設你有一個按鈕來提交表單,你可以保持形式在這個答案提交: Want html form submit to do nothing

+0

不,我希望AJAX提交僅用於驗證。只有在驗證成功的情況下才會正常提交。 – GSTAR

-1

這是一種正常的行爲造成的,只要表單提交,以防止這一點,你可以使用preventDefault()功能,像這樣:

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

    ... 
} 
0

如果我理解正確的問題,您需要去防止默認行爲和驗證,如果一切進行驗證,恢復默認的表單行爲提交數據。

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