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

General
1

[original thread by Salim Castellanos]

2

[Edgar Müller]

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?

3

[Salim Castellanos]

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?

4

Hi Salim. Did you see this answer? I think it should answer your question here.

5

[Salim Castellanos]

a need know if the form is valid to click a button for example…

6

[Salim Castellanos]

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.

7

[Salim Castellanos]

1326×536 14.2 KB

8

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;
}
  1. 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;
};
  1. 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 :wink: