Visualizzazione degli errori di convalida in Laravel 5 con React.js e Ajax

Question

Sto eseguendo un'applicazione Laravel 5 che ha la sua vista principale visualizzata utilizzando React.js. Nella pagina, ho un semplice modulo di input, che sto gestendo con Ajax (rimandando l'input senza aggiornare la pagina). Convalido i dati di input nel mio UserController. Quello che mi piacerebbe fare è visualizzare i messaggi di errore (se l'input non supera la convalida) nella mia vista.

Vorrei anche che gli errori di validazione appaiano in base allo stato (inviato o non inviato) all'interno del codice React.js.

Come faccio a utilizzare React.js e senza aggiornare la pagina?

Ecco il codice: il codice

React.js:

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; 

} 

Grazie per il vostro aiuto!

Answer 1

Secondo documenti laravel, mandano una risposta con 422 codice validazione fallita:

Se la richiesta in arrivo è stato una richiesta AJAX, senza redirect sarà generato. Invece, una risposta HTTP con un codice 422 di stato sarà restituito al browser contenente una rappresentazione JSON degli errori di validazione

Quindi, è solo bisogno di gestire la risposta e, se la convalida non è riuscita, aggiungere un messaggio di convalida allo stato, qualcosa di simile nel seguente frammento di codice:

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) 
     }); 

Dopo di che, nel metodo 'render', basta controllare se this.state.validationErrorMessage è impostato e rendere il messaggio da qualche parte:

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> 
    ) 
    }