Topic: invalidFeedback & Laravel Validation Issue

Tenarius free asked 3 years ago


Problem: If the laravel-validation fails because no value is given in the form-field, everything works perfectly. But if it fails because the name-form-value is too long, the invalid feedback is not displayed.

My Question: What kind of influence do I have on the "invalidFeedback" so that it is displayed when I need it without writing further jQuery code like:

$("#form-name").removeClass("is-invalid");
$("#form-name-section .invalid-feedback").html("");
$("#form-name").addClass("is-invalid");
$("#form-name-section .invalid-feedback").html(errormessage);


Here is my code:

I can validate my incoming data in Laravel and, depending on the error, send various error messages back to the front end.

$data = request()->validate([
    'name' => 'bail|required|min:3|max:128',
    'email' => 'required|email',
    'message' => 'required',
    'privacy' => 'accepted'
]);

In response I get an object with the error notifications in vue-axios.

{
    name: ["My Error Message"],
    email: ["My Error Message"],
    message: ["My Error Message"],
    privacy: ["My Error Message"]
}

I save this in my prepared vue-error-data-object.

errors: {
    name: "",
    email: "",
    message: "",
    privacy: "",
}

And so.

let errors = e.response.data.errors;

this.errors.name = errors.name[0]
this.errors.email = errors.email[0]
this.errors.message = errors.message[0]
this.errors.privacy = errors.privacy[0]

Now I use the mdb-invalidFeedback and simply insert the error message.

<mdb-input 
    label="Your Name" 
    v-model="fields.name"
    :invalidFeedback="errors.name"
    required
/>


Regards


Magdalena Dembna staff answered 3 years ago


You don't need to use jQuery and set invalid message by hand - you can use custom validation instead: https://mdbootstrap.com/docs/vue/forms/validation/#custom-validation

<template>
  <form novalidate @submit.prevent="checkForm" class="m-5">
    <div class="form-row">
      <div class="col-md-4">
        <mdb-input type="text" v-model="field.value" required invalid-feedback="error" :custom-validation="field.validated" :is-valid="field.isValid"/>
      </div>
    </div>
    <mdb-btn type="submit">Submit form</mdb-btn>
  </form>
</template>
<script>
  import { mdbBtn, mdbInput } from "mdbvue";

  export default {
    components: {
      mdbBtn,
      mdbInput
    },
    data() {
      return {
        field: {
          value: '',
          isValid: false,
          validated: false
        },
      }
    },
    methods: {
      checkForm(event) {
        if (this.field.value.length < 4) {
          this.field.isValid = false;
        }
        else {
          this.field.isValid = true;
        }

        this.field.validated = true;
      }
    }
  };

</script>

Tenarius free commented 3 years ago

Thank you, this works for me!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No