[Vuejs]-I am trying to build a contact form in Vue.js and Php but i am getting errors i am not quite sure how to solve this problem

by

0👍

✅

I don’t know what errors you get, but I see a problem with how the form is submitted.

Some changes I recommend:

The form:
<form id="app" @submit="saveUser" method="post" novalidate="true"> ... </form>

The button:
<input type="submit" class="btn btn-btn btn-grad btn-submit" />

The saveUser method:

saveUser(event){
  event.preventDefault()

  this.checkForm()

  if(!this.errors.length) {
     var formData = this.toFormData(this.newUser);

      axios.post('http...')
      // rest of the code
  }
}

Can’t test it as I don’t have the project, but this should help.

However, instead of the above approach, I would recommend to do the validation at input level and let each input component deal with its own validation logic and messages. The submit button to become enabled only when no errors exist in the form. There are many component libraries for this. For the user would be much better experience to see the errors in real time than with the above way to have a list of errors upon trying to submit the form.

Leave a comment