Hiển thị lỗi xác thực trong Laravel 5 với React.js và Ajax

Question

Tôi đang chạy ứng dụng Laravel 5 có chế độ xem chính được hiển thị bằng React.js. Trên trang, tôi có một biểu mẫu đầu vào đơn giản, mà tôi đang xử lý bằng Ajax (gửi lại đầu vào mà không cần làm mới trang). Tôi xác thực dữ liệu đầu vào trong UserController của mình. Những gì tôi muốn làm là hiển thị thông báo lỗi (nếu đầu vào không vượt qua xác nhận) trong quan điểm của tôi.

Tôi cũng muốn các lỗi xác thực xuất hiện dựa trên trạng thái (đã gửi hoặc không được gửi) trong mã React.js.

Làm cách nào để thực hiện việc này bằng React.js và không làm mới trang?

Dưới đây là một số mã:

React.js mã:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var SignupForm = React.createClass({ 
    getInitialState: function() { 
    return {email: '', submitted: false, error: false}; 
    }, 

    _updateInputValue(e) { 
    this.setState({email: e.target.value}); 
    }, 

    render: function() { 
    var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; 
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; 
    return (
     <div> 
{this.state.submitted ? null : 
           <div className="overall-input"> 
            <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}> 
             <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} /> 

             <div className="button-row"> 
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a> 
             </div> 
            </ReactCSSTransitionGroup> 
           </div>        
} 
     </div> 
    ) 
    }, 

    saveAndContinue: function(e) { 
    e.preventDefault() 

    if(this.state.submitted==false) { 
     email = this.refs.email.getDOMNode().value 
     this.setState({email: email}) 
     this.setState({submitted: !this.state.submitted}); 

     request = $.ajax({ 
       url: "/user", 
       type: "post", 
       data: 'email=' + email + '&_token={{ csrf_token() }}', 
       data: {'email': email, '_token': $('meta[name=_token]').attr('content')}, 
       beforeSend: function(data){console.log(data);}, 
       success:function(data){}, 
     }); 


     setTimeout(function(){ 
      this.setState({submitted:false}); 
     }.bind(this),5000); 

    } 

    } 
}); 

React.render(<SignupForm/>, document.getElementById('content')); 

UserController:

public function store(Request $request) { 

    $this->validate($request, [ 
     'email' => 'Required|Email|Min:2|Max:80' 
    ]); 

    $email = $request->input('email');; 

     $user = new User; 
     $user->email = $email; 
     $user->save(); 

    return $email; 

} 

Cảm ơn bạn đã giúp đỡ của bạn!

Answer 1

Theo tài liệu Laravel, họ gửi một phản ứng với 422 mã trên xác nhận thất bại:

Nếu yêu cầu đến là một yêu cầu AJAX, không chuyển hướng sẽ tạo ra. Thay vào đó, một phản ứng HTTP với mã 422 trạng thái sẽ được trả lại trình duyệt chứa một biểu diễn JSON của lỗi xác nhận

Vì vậy, bạn chỉ cần để xử lý phản ứng và, nếu xác nhận thất bại, thêm một tin nhắn xác nhận đối với nhà nước, một cái gì đó giống như trong đoạn mã sau:

request = $.ajax({ 
       url: "/user", 
       type: "post", 
       data: 'email=' + email + '&_token={{ csrf_token() }}', 
       data: {'email': email, '_token': $('meta[name=_token]').attr('content')}, 
       beforeSend: function(data){console.log(data);}, 
       error: function(jqXhr, json, errorThrown) { 
       if(jqXhr.status === 422) { 
        //status means that this is a validation error, now we need to get messages from JSON 
        var errors = jqXhr.responseJSON; 
        var theMessageFromRequest = errors['email'].join('. '); 
        this.setState({ 
         validationErrorMessage: theMessageFromRequest, 
         submitted: false 
        }); 
       } 
       }.bind(this) 
     }); 

sau đó, trong mục 'làm' phương pháp, chỉ cần kiểm tra nếu this.state.validationErrorMessage được thiết lập và đưa ra thông điệp ở đâu đó:

render: function() { 
    var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; 
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; 
    return (
     <div> 
     {this.state.submitted ? null : 
      <div className="overall-input"> 
       <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}> 
        <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} /> 
        <div className="validation-message">{this.state.validationErrorMessage}</div> 
        <div className="button-row"> 
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a> 
        </div> 
       </ReactCSSTransitionGroup> 
      </div>        
     } 
     </div> 
    ) 
    }