Displaying validation errors in Laravel 5 with React.js and Ajax -

i running laravel 5 application has main view rendered using react.js. on page, have simple input form, handling ajax (sending input without page refresh). validate input data in usercontroller. display error messages (if input not pass validation) in view.

i validation errors appear based on state (submitted or not submitted) within react.js code.

how using react.js , without page refresh?

here code:

react.js code:

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 follow @ '+email+' soon!' : 'enter email request 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;  } 

thank help!

according laravel docs, send response 422 code on failed validation:

if incoming request ajax request, no redirect generated. instead, http response 422 status code returned browser containing json representation of validation errors

so, need handle response and, if validation failed, add validation message state, in following code snippet:

  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 validation error, need messages json                     var errors = jqxhr.responsejson;                     var themessagefromrequest = errors['email'].join('. ');                     this.setstate({                         validationerrormessage: themessagefromrequest,                         submitted: false                     });                 }               }.bind(this)         }); 

after that, in 'render' method, check if this.state.validationerrormessage set , render message somewhere:

  render: function() {     var text = this.state.submitted ? 'thank you!  expect follow @ '+email+' soon!' : 'enter email request 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>     )   }