menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

JSONForms

JSON Forms is a JSON Schema based approach for creating forms and comes with support for React, Angular and Vue. Support here is free, but might involve some delay in the replies based on our current workload for paying customers. We also offer PROFESSIONAL SUPPORT packages to get you started quickly with JSON Forms and to help you with any questions and technical difficulties for JSON Forms with guaranteed response time and in-depth technical solutions. For details please see our web page linked below.

Channels
Team

Hello everyone, Does anyone know how I can verify that the form is valid? I…

July 1, 2019 at 6:08pm

Hello everyone, Does anyone know how I can verify that the form is valid? I look in the examples and I do not see an example of validation. First of all, Thanks.

July 1, 2019 at 6:08pm

July 2, 2019 at 7:39am
What exactly are trying to do? I suppose you are not looking for something like demonstrated in the person example (https://jsonforms.io/examples/person), where errors are just displayed beneath the form?

July 2, 2019 at 3:10pm
Hello, first thanks for answering, if the example if I saw it, what I do not see is how in programming I realize that the form is not valid?

July 3, 2019 at 7:59am
Hi Salim. Did you see this answer? I think it should answer your question here.

July 3, 2019 at 4:14pm
a need know if the form is valid to click a button for example....
yes but the problem I have is that in the application example that I download on the page, I do not know how to access the variable "store" from the App.tsx file, which is where I have the function when I click. the variable "store" is accessible is from the file index.tsx, I really apologize in advance, it must be because of my lack of knowledge in React, that has made it difficult to do a proof of concept.

July 4, 2019 at 8:26am
I suggest to check some tutorials on react / redux. In the case for the current jsonforms-react-seed you can achieve your goal with
1) Declaring what type of value you want to have in your application
export interface AppProps extends WithStyles<typeof styles> {
dataAsString: string;
hasErrors: boolean;
}
2) Map the value from the state into the props
const mapStateToProps = (state: JsonFormsState) => {
return {
dataAsString: JSON.stringify(getData(state), null, 2),
hasErrors: hasErrors(state)
};
};
const hasErrors = (state: JsonFormsState) => {
if (state.jsonforms.core && state.jsonforms.core.errors) {
return state.jsonforms.core.errors.length !== 0;
}
return false;
};
3) Use the value in your button
class App extends React.Component<AppProps, any> {
render() {
const { classes, dataAsString, hasErrors } = this.props;
return (
<div>
...
<input type={'button'} value={'Clickable when form is valid'} disabled={hasErrors}/>
I hope this helps you get on track ;)
Edited