Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for rules/related validation with Array path. (DVR) #328

Open
davorbadrov opened this issue Sep 28, 2017 · 5 comments
Open

Support for rules/related validation with Array path. (DVR) #328

davorbadrov opened this issue Sep 28, 2017 · 5 comments

Comments

@davorbadrov
Copy link

davorbadrov commented Sep 28, 2017

I'm not sure if I'm doing something wrong, but I'm trying to make validation work with an array of objects where 2 properties are related to each other, e.g. at least one needs to be present.

In the demo below: members[].id should be required unless the members[].age is present.
At least that's the goal, am I doing something wrong or is there a bug in the lib?

Link to the demo

Lib versions:

mobx: 3.3.0
mobx-react-form: 1.32.2
validatorjs: 3.13.5

Output

is form Valid: false
form.values:
{
  "club": {
    "name": "Happy club",
    "city": "New York"
  },
  "members": [{
    "lastname": "Doe",
    "firstname": "John",
    "age": 32,
    "id": ""
  }]
}

errors:
{
  "club": {
    "name": null,
    "city": null
  },
  "members": [{
    "lastname": null,
    "firstname": null,
    "age": null,
    "id": "The id field is required when members[].age is empty."
  }]
}

Code for the demo

import Validator from 'validatorjs';
import MobxReactForm from 'mobx-react-form';

const fields = [
  'club.name',
  'club.city',
  'members',
  'members[].firstname',
  'members[].lastname',
  'members[].age',
  'members[].id'
];


const rules = {
  'club.name': 'string|required|min:3',
  'club.city': 'string|required|min:3',
  'members[].lastname': 'string|required',
  'members[].firstname': 'string|required',
  'members[].age': 'required|integer',
  'members[].id': 'boolean|required_without:members[].age'
};

var values = {
    club: {
      name: 'Happy club',
      city: 'New York'
    },
    members: [{
      lastname: 'Doe',
      firstname: 'John',
      age: 32,
      id: null
    }]
};

function report(form) {
    console.log('is form Valid: ', form.isValid);
    console.log('form.values: ',  JSON.stringify(form.values(), null, 2));
    console.log('errors: ', JSON.stringify(form.errors(), null, 2));
}

class NestedFieldsForm extends MobxReactForm {
  plugins() {
    return {dvr: Validator}
  }
  setup() {
     return {fields, values, rules}
  }
}

const form = new NestedFieldsForm();

form.submit({
  onError: form => report(form),
  onSuccess: form => report(form)
});

Edit: code format fix

@foxhound87
Copy link
Owner

Right now using the array notation in the rules is not supported, you should specify the index of the array to validate inside the rule, so I suggest to dynamically create the rules:

const makeMemberIdRules = (id) =>   
  'boolean|required_without:members[' + id + '].age';

form.$('members')
  .each((field) => (field.name === 'id') && 
    field.set('rules', makeMemberIdRules(field.container().name)));

I updated your demo: https://www.webpackbin.com/bins/-Kv7y24BahF4zIdxa1nv

I will implement this feature in the future versions.

@foxhound87
Copy link
Owner

Related to #249

@foxhound87 foxhound87 changed the title Validation inside array broken if one property depends on another Support for rules/related validation with Array path. Sep 28, 2017
@davorbadrov
Copy link
Author

Thanks a lot for the swift response. You saved me a lot of grief 👍

@simon998yang
Copy link

It's been one year , any progress on this issue? ta

@princejoseph
Copy link

@foxhound87 the demo link is not available anymore. Where should I add the code you pasted for array validation to work?

@foxhound87 foxhound87 changed the title Support for rules/related validation with Array path. Support for rules/related validation with Array path. (DVR) Aug 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants