Отображение ошибок валидации в Laravel 5 с React.js и Ajax

Question

Я запускаю приложение Laravel 5, основной вид которого отображается с использованием React.js. На странице у меня есть простая форма ввода, которую я обрабатываю с помощью Ajax (отправка ввода обратно без обновления страницы). Я проверяю входные данные в моем UserController. То, что я хотел бы сделать, это отображать сообщения об ошибках (если входные данные не проходят проверку) в моем представлении.

Я также хотел бы, чтобы ошибки проверки появлялись в зависимости от состояния (отправлено или не отправлено) в коде React.js.

Как бы я сделал это, используя React.js и без обновления страницы?

Вот некоторый код:

Код 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;

}

Спасибо за помощь!

Answer 1

Согласно документам Laravel, они отправляют ответ с кодом 422 при неудачной проверке:

Если входящий запрос был запросом AJAX, перенаправление не будет сгенерировано. Вместо этого в браузер будет возвращен HTTP-ответ с кодом состояния 422, содержащий JSON-представление ошибок проверки

Итак, вам просто нужно обработать ответ и, если проверка не удалась, добавить сообщение проверки в состояние, как в следующем фрагменте кода:

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

После этого, в методе render, просто проверьте, установлен ли this.state.validationErrorMessage, и отредактируйте сообщение где-нибудь:

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