Validations on dynamic added fields, show property remains false(always) even if there is an error

[harshitchaudhary]

I have a form where in as soon as I check a checkbox couple of more fields loads which require validations so I tried you library which is working great, There is small glitch on my end as far as I know, that show property of $validation remains false always.
Here is my validationConfig function

function validationConfig(props)
{
  let {fields} = props
  let validations = {}
  let inputs = []
  let valid_num = 1

  Object.keys(fields).forEach(function(key) {
      inputs.push(key)
      switch (key) {
        case 'student_completion_year':
          validations.student_completion_year = [
                [isNull, fields[key]],
                [isNumber, fields[key]]
              ]
          break

          case 'student_level':
            validations.student_level = [
                  [isNull, fields[key]],
                  [isNumber, fields[key]]
                ]
            break

          case 'student':
            validations.student = [
              [isArrEmpty, fields[key]],
            ]
          break

          case 'student_internship_country':
            validations.student_internship_country = [
              [isArrEmpty, fields[key]],
            ]
          break

          case 'student_current_country':
            validations.student_current_country = [
              [isNull, fields[key]],
              [isNumber, fields[key]]
            ]
          break

          case 'phone_number':
            validations.phone_number = [
              [isNull, fields[key]],
              [isNumber, fields[key]]
            ]
          break

          case 'country_code':
          validations.country_code = [
            [isNull, fields[key]],
            [isNumber, fields[key]]
          ]
          break

          case 'student_aspired_level':
          validations.student_aspired_level =[
            [isNull, fields[key]],
            [isNumber, fields[key]]
          ]
          break

          case 'student_aspired_country':
          validations.student_aspired_country= [
            [isArrEmpty, fields[key]],
          ]
          break

          case 'student_aspired_intake_month':
          validations.student_aspired_intake_month= [
            [isNull, fields[key]],
            [isNumber, fields[key]]
          ]
          break

          case 'student_aspired_intake_year':
          validations.student_aspired_intake_year= [
            [isNull, fields[key]],
            [isNumber, fields[key]]
          ]
          break

          case 'location':
          validations.location= [
            [isNull, fields[key]]
          ]
      }
  })
  fields = inputs
  return {fields, validations}
}

Looking for help in order to resolve this particular issue. I tried using $validation.isValid property but it shows error by default which is expected as well.

[marcelka]

@harshitchaudhary I am glad you like the library.

To solve the problem you described:

You are right, isValid will not tell you whether to show or hide the validation result. It will just tell you whether the result is correct or incorrect or unknown ("unknown" may happen for async validations).

I think you will need to explicitly specify the name of the field/fields validated by each of your validations, using more verbose config, like this one:

validations: {
  email: {
    rules: [
      ['isEmail', isEmail, email],
      ['isUnique', isUnique, email]
    ],
    // You are telling the validation library that it should calculate the show
    // property based on change and blur events for the field 'email'. There
    // is some default behavior, make sure you intend to use the defaults, or
    // write it here explicitly.
    fields: 'email' 
  },
  ...
}

Please look at this part of the documentation for explanation and more details: https://github.com/vacuumlabs/react-custom-validation#validationsfields-optional

Also, you will need to use the $field helper (if you have not already), to inform the validation library about changes and blurs of individual fields. Please read more here:
https://github.com/vacuumlabs/react-custom-validation#fieldfield-onchange-onblur-debounce

Hope this helps. If you have any other questions, or if this does not solve your problem, let me know!

[harshitchaudhary]

Also, you will need to use the $field helper (if you have not already)
Actually I am using material-ui for frontend so they provide explicitly the method for change and modifications of the value or else I wont get the actual or expected value from the fields that's why I can't go ahead with this
{...$field('first_name', (e) => onChange('first_name', e.target.value))}
So I need way to inform the library about change manually, if this is my select field as per usage by material-ui

                 <SelectField
                     floatingLabelText="My Completion Year"
                     value={fields.student_completion_year}
                     errorText={ !$validation.student_completion_year.isValid && $validation.student_completion_year.error.reason }
                     onChange={(e, index, value) => onChange('student_completion_year', e, value)}
                  >
                     <MenuItem value={2017} primaryText="2017" />
                     <MenuItem value={2018} primaryText="2018" />
                     <MenuItem value={'asd'} primaryText="2019" />
                     <MenuItem value={2020} primaryText="2020" />
                     <MenuItem value={2021} primaryText="2021" />
                  </SelectField>

onChange function within <SelectField> is rendered from main class like this

<RegistrationForm
          fields={this.state.fields}
          addNextDegreeData={this.addNextDegreeData}
          addCurrentDegreeData={this.addCurrentDegreeData}
          addInternshipData={this.addInternshipData}
          values={this.state.values}
          onChange={this.fieldChange}
          handleSignup={this.handleSignup}
          handleCities={this.handleCities}
        />

And this is how I am handling it in fieldChange function

fieldChange = (field, index, value) => {
    this.setState(update(this.state, {fields: {[field]: {$set: value}}}))
  }

State and everything is being updated, I know I have some problem in the fields part of this snippet (copied from original question)

fields = inputs
  return {fields, validations}

Also it will be great if you can explain this as well in your example 3 fields = [...fields, ..._fields]

I tried your way and It was still showing show property as false.