Invariant Violation error when managing validation via state

[leplatrem]

I took your very simple example of this jsfiddle, and changed so that validation is performed asynchronously (ajax). Validation results are stored in form state.

But as soon as a validation error was set on one of the fields, I systematically face this error on the next input change :

Uncaught Error: Invariant Violation

The code is very straightforward : https://github.com/spiral-project/daybed.js/tree/add_examples/examples/wingspan

Appart from that, it looks that wingspan fails at cleaning the tooltips too :

...
$body.data('kendoErrorTooltip').hide();
...
Uncaught TypeError: Cannot read property 'hide' of undefined       wingspan-forms-quickstart.js:2441
hideErrorTooltip                                              wingspan-forms-quickstart.js:2441
React.createClass.componentWillReceiveProps                wingspan-forms-quickstart.js:4694
D._performUpdateIfNecessary                             react-with-addons.min.js:19

I'm not asking for code debugging, but if by any chance you can spot any hint, I would be very grateful ! Thank you very much !

[dustingetz]

What is the full error message? I can't reproduce from your repo without your backend

[dustingetz]

Perhaps the easiest way for me to repro is for you to add a Mockjax configuration https://github.com/appendto/jquery-mockjax/

[leplatrem]

Thanks for getting back to me!

The backend in the demo is public actually, but you first have to accept the SSL certificate at https://daybed.lolnet.org/v1/

To reproduce the problem :

• introduce some data
• a validation error is set on fields (setState({errors: ...}))
• change any of the fields value
• the Invariant Violation appears at the next (setState({record: ...}))

It only happens when validation errors are set. If I replace my code to mark fields as valid [true, ''] even asynchronously, the Invariant Violation never occurs...

The full stack trace looks like this :

I'll have a look at mockjax (or mocha and sinon, with which I'm more proficient...)

Thank you very much !

[dustingetz]

I think this is what is happening:

The tooltip exception occurs during a react component lifecycle method, which broke react's internal stuff, which caused a future Invariant Violation

To resolve the tooltip exception, add this line before your root call to React.renderComponent: WingspanForms.ControlCommon.attachFormTooltips($(document.body));

[leplatrem]

That was it ! It's a miracle :)

We can now demo Daybed using Wingspan forms, excellent !

Thank you very much !

[dustingetz]

I would love to see what you are doing, is there a blog or documentation?

[leplatrem]

Yes sure !

In short, we built a reusable REST backend, where you first post a model schema, and then validate or store records for it. More infos : http://daybed.readthedocs.org/en/latest/

Wingspan is a great way to build forms dynamically from model schemas :)