kettanaito / react-advanced-form

Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
https://redd.gitbook.io/react-advanced-form
MIT License
217 stars 24 forks source link

Question : Messages validation for fieldGroup ? #410

Closed Gus19 closed 4 years ago

Gus19 commented 4 years ago

Hello,

I have a rules validation with a "fieldGroup" who is working fine, and I want to add a specific message validation.

I tried the same pattern as the rule, but it's not working ? I don't find the information into the documentation, this is not supported ?

Here is my code :

const validationRules = {
  fieldGroup: {
    plainPassword: {
      name: {
        first: {
          minLength: ({value}) => value.length >= 6,
          capitalLetter: ({ value }) => /[A-Z]/.test(value)
        }
      }
    }
  },
  name: {
    username: {
      minLength: ({value}) => value.length >= 3
    }
  }
}
const validationMessages = {
  fieldGroup: {
    plainPassword: {
      name: {
        first: {
          missing: 'Please provide the first password',
          invalid: 'The first password is invalid',
          rule: {
            minLength: 'First Password must be at least 6 characters long',
            capitalLetter: 'First Password must include at least one capital letter'
          }
        }
      }
    },
  },
  name: {
    username: {
      rule: {
        minLength: 'Username must be at least 3 characters long'
      }
    }
  }
}

Thanks for the help ! :)

kettanaito commented 4 years ago

Hey, @Gus19. Thanks for reaching out.

I'm afraid targeting fields based on their field group is not supported when providing validation messages. The validation messages object supports three root-level keys (selectors):

These are described in the Validation messages section of the documentation.

If you wish to have a unique validation message for a field based on its field group, I suggest you provide a custom message resolve function and decide on the validation message based on props:

const validationMessages = {
  name: {
    first: {
      invalid({ fieldProps }) {
        // Look the properties of `fieldProps` and return conditional error messages.
      }
    }
  }
}
Gus19 commented 4 years ago

Thanks for your response. I will continue to work with name for specifics messages :)