Server side validation

[Hannoma]

Hi all,

I send the poll answers to my backend which also validates the request. My server-side validation is more strict for some question types than the included one. I want to show these validation errors. Currently, I have managed this:

onSubmit(questionList) {
  const formData = new FormData();
  
  questionList.forEach(question => {
      if (question.answer !== null) {
          formData.append(question.id, question.answer)
      }
  })
  
  let request_url = `/questionnaires/${this.questionnaire_id}`;
  axios.post(request_url, formData)
      .then(response => {
          this.submitted = true;
          location.href = response.request.responseURL;
      }).catch(err => {
          if (err.response && err.response.status === 422) {
              const errors = err.response.data.errors;
              this.submitted = false;
              this.$refs.flowform.submitted = false;
              this.$refs.flowform.goToQuestion(Object.keys(errors)[0]);
              this.$refs.flowform.questions.forEach(function (question) {
                  if (question.id in errors) {
                      question.description = errors[question.id][0]
                  }
              })
          } else {
              console.error(err);
          }
      });
  },

This shows the validation messages as the description of the questions. But, I want to hook this up to the built-in validation in order to show the validation errors in red ;)

[spinn]

Hi @Hannoma,

the ability to extend validation and add your own validation methods (including asynchronous ones) is something that's on the roadmap but isn't implemented for now (we'll probably add a validate method to QuestionModel where you'll be able to define custom validation logic per question).

[McFlyin619]

is there anyway to do some client side validation? I have a username field and i need to validate it based on an array ive pulled from my backend before moving on to the next question

[6540140]

I use OnAnswer(questionAnswered) method... (ref: https://www.ditdot.hr/en/docs/vue-flow-form-guide)
When you check answer..OnAnswer method is invoked...
in this method, you can validate..
like this...

onAnswer(questionAnswered) {
if(questionAnswered.id == 'a003') {
this.IsFirstSurvey()
if(!this.isFirstSurvey) {
this.CheckReSurvey()
}
else {
console.log('Survey 진행 1st')
}
}
},

[McFlyin619]

Thanks for you reply. That's what I ended up using but I wanted to somehow display the error message for that question and am not sure how to do that.

[6540140]

I use SweetAert2 ..library.
async CheckReSurvey() {
await Swal.fire({
title: 'Retry?',
text: 'want to survery again?',
icon: 'question',
confirmButtonText: 'Retry Survey',
cancelButtonText: 'End..Survey',
showCancelButton: true,
}).then((result) => {
if(result.isConfirmed) {
console.log('aaa')
this.checkReSurvey = true
}
else {
console.log('bbb')
this.checkReSurvey = false
}
})
console.log('checkReSurvey: ', this.checkReSurvey)
},

[6540140]

Hmm..Sorry.
Read.. below URL document..

SweetAlert2 Library: https://sweetalert2.github.io/ => info to user with popup..
Vue Flow Form Document: https://www.ditdot.hr/en/docs/vue-flow-form-guide ==> OnAnswer method.