Need help in validating multiple forms using $refs in vuejs

Question

Hello Devs I am a fresher and I am currently working on a task. In that I have used 3 forms inside single form so I can validate the object of objects but when I try to validate them in nested manner the only the first form was validating. Can anyone give me some advices to solve this problem ? And this above pic is the code I have used to validate the nested forms but only 1st form is validating.

Answer 1

I agree with the comments that say you should not submit a picture of text, and you need to supply a minimal reproducible example. Without that, a specific error can't be pinpointed.

However, here is some general feedback. One issue is that deeply nested code is not clean code. In my opinion you should divide the logic into smaller chunks and write it in a more linear structure to make it easier to troubleshoot. You could have computed properties like this:

bankDetailsValid(){
  // bank details validation here
},
employeeDetailsValid(){
  // employee details validation here
},
# more specific validation can be in more computed properties
allFieldsValid(){
  // return this.bankDetailsValid && this.employeeDetailsValid # can add
  // whatever checks are needed here to determine if the form as a
  // whole can be submitted
},
errorMessage() {
  if (!this.bankDetailsValid) {
    return "Bank details error"
  }
  if (!this.employeeDetailsValid){
    return "Employee details error"
  }
  # more error messages would go in if-statements here. Then you would return a default error:
  return ""
}

Also keep in mind that "formValidation" suggests that your function is doing more than one thing, because it is both determining if the form is valid AND determining what the error message is. That's overly complex, so it leads to dirty code. The code will be easier to read and debug if one function does one thing.