title: 422 (Unprocessable Entity )error when submitting form with laravel and vue js
body: <p>after validation my inputs i want to submit the form but 422 (Unprocessable Entity )error show
  i try many ways of validation by laravel  but the same error show !!!
  I don't understand why, even if input valid data, it responds with a 422 response and absolutely no error messages. Could anyone help me normalize the validation behavior?
  this is my form in Project.vue:</p>
  
  <pre><code> &lt;form @submit.prevent=" x ? modifier():ajouterProjet()"&gt;
        &lt;div class="modal-body"&gt;
        &lt;div class="form-group"&gt;
    &lt;label&gt;Nom&lt;/label&gt;
    &lt;input v-model="form.name" type="text" name="name"
      class="form-control" :class="{ 'is-invalid': form.errors.has('name') }"&gt;
    &lt;has-error :form="form" field="name"&gt;&lt;/has-error&gt;
  &lt;/div&gt;
   &lt;div class="form-group"&gt;
    &lt;label&gt;Client&lt;/label&gt;
  
    &lt;select v-model="form.client_id"   type="text" name="client_id"
      class="form-control" :class="{ 'is-invalid': form.errors.has('client_id') } "   &gt;
      &lt;option value="" selected&gt;Selectez Le Client&lt;/option&gt;
      &lt;option v-for = "(client , index) in clients" :key="index" v-bind:value="client.id"&gt;{{ client.name }}&lt;/option&gt;
    &lt;/select&gt;
    &lt;has-error :form="form" field="client_id"&gt;&lt;/has-error&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;div class="form-group"&gt;
    &lt;label&gt;Chef de Projet&lt;/label&gt;
    &lt;select v-model="form.chefprojet" type="text" name="chefprojet"
      class="form-control" :class="{ 'is-invalid': form.errors.has('chefprojet') }"&gt;
      &lt;option selected value=""&gt;Selecter Un Chef de projet&lt;/option&gt;
       &lt;option v-for = "(chef , index) in chefs" :key="index" v-bind:value="chef.id"&gt;{{ chef.name }}&lt;/option&gt;
  
    &lt;/select&gt;
    &lt;has-error :form="form" field="chefprojet"&gt;&lt;/has-error&gt;
  
  &lt;/div&gt;
              &lt;label&gt;Membres&lt;/label&gt;
              &lt;select   v-model="form.membre_id" type="text" name="membre_id[]" class="form-control" :class="{ 'is-invalid': form.errors.has('membre_id') } " multiple="multiple"&gt;
                &lt;option value&gt;Selectez Les membres&lt;/option&gt;
                &lt;option v-for="(membre , index) in membres" :key="index" v-bind:value="membre.id"&gt;
                      {{ membre.name }}
                &lt;/option&gt;
              &lt;/select&gt;
              &lt;has-error :form="form" field="membre_id"&gt;&lt;/has-error&gt;
   &lt;/div&gt;
  
   &lt;div class="form-group" &gt;
    &lt;label&gt;Duree&lt;/label&gt;
    &lt;input v-model="form.durre" type="text" name="durre"
      class="form-control" :class="{ 'is-invalid': form.errors.has('durre') } "&gt;
    &lt;has-error :form="form" field="durre"&gt;&lt;/has-error&gt;
  &lt;/div&gt;
  
   &lt;div class="form-group"&gt;
    &lt;label&gt;Description&lt;/label&gt;
    &lt;textarea v-model="form.description" type="text" name="description"
      class="form-control" :class="{ 'is-invalid': form.errors.has('description') }"&gt;&lt;/textarea&gt;
    &lt;has-error :form="form" field="description"&gt;&lt;/has-error&gt;
  &lt;/div&gt;
   &lt;div class="form-group"&gt;
    &lt;label&gt;Budget&lt;/label&gt;
    &lt;input v-model="form.budget" type="text" name="budget"
      class="form-control" :class="{ 'is-invalid': form.errors.has('budget') }"&gt;
      &lt;has-error :form="form" field="budget"&gt;&lt;/has-error&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;button type="submit" v-show="!x" class="btn btn-primary" &gt;Ajouter&lt;/button&gt;
      &lt;button type="submit" v-show="x" class="btn btn-primary" &gt;Modifier&lt;/button&gt;
    &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>and this the script belongs  to the Project.vue:</p>
  
  <pre><code>   form : new Form({
         id:'',
         name:'',
         durre:'',
         description:'',
         budget:'',
         owner:'',
         membres: "",
      client_id:"",
      membre_id: [],
      chefprojet:''
  
  
     }),
   methods:{
             ajouterProjet(){
              this.form.post("api/projet")
      .then(()=&gt;this.form.post('api/chefdeprojet').then(()=&gt;this.form.post('api/userprojet').then(()=&gt;{
              fire.$emit('ajoutprojet');
              this.form.reset();
              $("#AjouterProjet").modal('hide');
              Toast.fire({
                      icon: 'success',
                      title: 'Projet Ajouter'
  
              })
  
              }).catch(()=&gt;{
               })).then(()=&gt;{axios.post('/api/clientpname')
                    }))
                    ;
  
  
                  },
  </code></pre>
  
  <p>and this my controller fuction:</p>
  
  <pre><code>  public function store(Request $request)
  {
      //
  
  $this-&gt;validate($request,[
          'name' =&gt; 'required|string|max:50',
          'durre' =&gt;  'required|string|max:50',
          'description'=&gt;'required|string|max:255',
          'client_id' =&gt; 'required',
          'budget' =&gt; 'required',
          'password' =&gt; 'required|string|min:6',
          'membre_id'=&gt;'required',
          'chefprojet'=&gt;'required'
        ]);
  
        $data = $request-&gt;all();
          $client = Client::where('id', $data['client_id'])-&gt;first();
         $projet =new Projet;
          $projet-&gt;name = $data['name'];
          $projet-&gt;durre = $data['durre'];
          $projet-&gt;description = $data['description'];
          $projet-&gt;client_id = $data['client_id'];
          $projet-&gt;owner = $client-&gt;name;
          $projet-&gt;budget = $data['budget'];
           $projet-&gt;save();
  
          }
  </code></pre>
  
  <p>and this is the route:</p>
  
  <pre><code>      Route::apiResource('projet' ,'API\ProjetController');
  </code></pre>