How to implement when there are more than one form?

[JabirMoidu]

Can you just give me an example if there are more than one form? How can we handle it separately? I have tried starting the state such as state={form1: Validator.addValidation({ username: '' });} . But it was showing some error.

[Kazimirkas]

Hi Jabir. Thank you for your question. The best way is to keep forms in separate React-componets. Validator will not work, if your state is not flat, if you have a nested objects state, you can't use this library and also you will need to carefully update state nodes to prevent mutations. I would highly recommend to you to keep the state as flat as possible. By the way we are working right now on 2.0 version, that well have much nicer and more simple Api.

[JabirMoidu]

Thanks for the response @Kazimirkas. If I keep state flat, It looks like a kind of constrain for having another objects on the state tree. You meant, it is not at all possible right now and would be available in the next version? I found this util is really helpful. But I am afraid of loosing some flexibility due to the above mentioned constrain. When is your latest version is going to be released?

[Kazimirkas]

Right now you can use any state in component, but for validation you can use only fields in the root keys of state's object. Like in this example:

import Validation from 'react-validation-utils';
const Validator = new Validation({
  login: [
   // ...rules array
  ],
  password: [
    // ...rules array
  ]
});
...

constructor() {
    super();
    this.state = Validator.addValidation({ 
       login: 'John', // can't be object, because it is presented in rules above
       password: '123', // can't be object, because it is presented in rules above
       form1: { ... } // can be any object
    });
}

So in this example login and password fields will be validated. They can't be objects.
But form1 - can be object.

I hope, that we will release version 2.0 next week.
In version 2.0 you can also use any kind of state. Validator will not be linked to state at all.

So if you have two forms, in version 2.0 you will have two possible solutions:

First solution

import Validation from 'react-validation-utils';
const validatorOfForm1 = new Validation({
  login: [
   // ...rules array
  ],
  password: [
    // ...rules array
  ]
});

const validatorOfForm2 = new Validation({
  email: [
   // ...rules array
  ],
  skype: [
    // ...rules array
  ]
});
...
...

constructor() {
    super();
   // you will not need to call addValidation anymore
    this.state = { 
      form1: { login: '...', password: '...'},
      form2: { email: '...', skype: '...'},
    }; 
}

...
// And then you can call:
validatorOfForm1.isFormValid(this.state.form1);
validatorOfForm2.isFormValid(this.state.form2);

Second solution

import Validation from 'react-validation-utils';
const validatorOfForms = new Validation({
  login: [
   // ...rules array
  ],
  password: [
    // ...rules array
  ],
 email: [
   // ...rules array
  ],
  skype: [
    // ...rules array
  ]
});

...
...

constructor() {
    super();
   // you will not need to call addValidation anymore
    this.state = { 
      form1: { login: '...', password: '...'},
      form2: { email: '...', skype: '...'},
    }; 
}

...
// And then you can call:
validatorOfForms.isFormValid(this.state.form1); // checks only form1
validatorOfForms.isFormValid(this.state.form2); // checks only form2
validatorOfForms.isFormValid({
...this.state.form1, 
...this.state.form2
});  // checks both forms

You will be able to choose any solution
Just wait for 2.0 version, if you can :)