Invalid state for the new form

[kmmbvnr]

It's pretty uncommon to see error messages on empty new form.

Ex in user list example, as soon as Add user button clicked.

Is there any way in valuelink library to postpone the validation till user navigates out of the field, or press submit button?

[gaperton]

Sure you can. Like this:

1. Add 'ingnoreIsRequired' attribute to the state, and set it to true in onSubmit handler.
2. In "is required" validation checks, instead of x => x it should be x => ignoreIsRequired || x
3. In the next checks emptiness guards are needed.
4. In submit button, you have to manually detect whenever required state members are empty.

[gaperton]

But I don't see any advantage in not telling the user from the beginning which fields are required.

What I would probably done if our QA would be bothered, is introducing different styles for error messages. error object can have any shape.

.check( x => x, { type : 'required', name : 'Name' })

Then, I would modify Input controls so they will style different error types differently. And this 'field required' message wouldn't look that scary.

[gaperton]

To do it in better way you need something more advanced than plain React state. Problem here is that checks are not attached to the state, they are inlined in render(). Which is okay for many cases, but you cannot run checks outside of render. This is rather serious restriction.

If you use models instead of the React state, you can. Cause checks will be attached to the model attributes, and your can validate model as a whole or by parts at any time you want. Which allows for variety of different validation strategies.

That's what we're doing. We are not using React state in production at all. And these links are attached to the models, so you can be quite flexible in approach to validation.

https://github.com/Volicon/NestedReact#link-validation

[gaperton]

Whenever input value is an empty string, and validation fails, it will add 'required' class to the input control. Thus, you will have an opportunity to mark it differently. With yellow, for example. Changes are now in 'develop' branch, will be released soon.

Thanks for the bug, it's was really the good point.