Mixing
How to validate multiple react-jsonschema-form in tabs
0
I'm fairly new to react-jsonschema-form and I'm trying to figure out how to validate multiple forms with a parent button's click. Right now I have a parent component that holds tabs and a submit button. Each tab contains a react-jsonschema-form. Is there a way to have the forms within each tab validate upon the parent submit buttons click? I'm able to console.log the tab names when the submit button is clicked, BUT the forms that are not currently active give an error that says: An invalid form control with name='' is not focusable.
For example, I have:
Parent Component:
<Paper style={styles.well} >
<Container style={styles.grid}>
<Row>
<Col xs={12} sm={12} md={8} lg={6} >
<Form >
<Form.Group controlId="name">
<Form.Label>Name *</Form.Label>
<Form.Control placeholder="Enter name" name='name' value={this.state.name} onChange={this.handleChange}/>
</Form.Group>
<Form.Group controlId="description">
<Form.Label>Description </Form.Label>
<Form.Control as='textarea' placeholder="Enter Description"= name='description' required value={this.state.description} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="pay">
<Form.Label>Pay *</Form.Label>
<Form.Control as="select" placeholder="select" name='pay' value={this.state.pay} onChange={this.handleChange}>
<option value="select"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</Form.Control>
</Form.Group>
</Form>
</Col>
{this.state.pay === '' ? <div></div>
: <TabContent onResetValidation={this.handleResetValidation} validateForms={this.state.validateForms} payType={this.state.pay}/>}
<Container>
<Row style={{paddingBottom:'15px', paddingTop:'10px'}}>
<Col xs={12} sm={12} md={12} lg={12} >
{this.state.pay === '' ? <div></div> :
<Button onClick={this.submitForms} variant='primary' size='large'>Submit Form
</Button>
}
</Col>
</Row>
</Container>
Tab Content Component:
<Container style={{paddingTop:'30px', width:'100%'}}>
<Row>
<Col xs={12} md={12} lg={12} >
<Tabs id={'PayTabs'} defaultActiveKey={1} >
<Tab eventKey={1} title="Tab 1">
<div style={{paddingTop:'20px'}}>
<Tab1 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={2} title="Tab 2">
<div style={{paddingTop:'20px'}}>
<Tab2 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={3} title="Tab 3">
<div style={{paddingTop:'20px'}}>
<Tab3 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
</Tabs>
</Col>
</Row>
Each child tab component looks like this:
export class Tab1 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillReceiveProps(nextProps, nextContent) {
if (nextProps.validateForms !== this.state.validateForms) {
if (nextProps.validateForms === true) {
debugger
console.log("Tab1");
this.form.submitButton.click();
this.props.onResetValidation();
}
}
}
render() {
return (
<Container style={{width: '100%', paddingBottom:'25px'}}>
<Row>
<Col xs={12} md={12} lg={12} style={{marginLeft:'-25px', marginTop:'-15px'}}>
<MyForm name='form' ref={(form) => {this.form=form;}}/>
</Col>
</Row>
</Container>
);
}
}
The MyForm component:
function Tpl(props) {
const {id, label, required, children} = props;
return (
<div className="myfield">
<label htmlFor={id}>{label}{required ? "*" : null}</label>
{children}
</div>
);
}
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {}
}
}
onSubmit(formData) {
//this only gets called if the validation is successful
console.log(formData);
}
onError(formData) {
console.log(formData)
}
render () {
return (
<Form2 FieldTemplate={Tpl} onError={this.onError} onChange={({ formData }) => this.setState({ formData })} formData={this.state.formData} schema={schema} onSubmit={this.onSubmit} className="component-container">
<button ref={(btn) => {this.submitButton=btn;}} style={{"display": "none"}}/>
</Form2>
);
}
}
javascript reactjs react-jsonschema-forms
asked Jan 2 at 17:22
JDunJDun
599
add a comment |
0
I'm fairly new to react-jsonschema-form and I'm trying to figure out how to validate multiple forms with a parent button's click. Right now I have a parent component that holds tabs and a submit button. Each tab contains a react-jsonschema-form. Is there a way to have the forms within each tab validate upon the parent submit buttons click? I'm able to console.log the tab names when the submit button is clicked, BUT the forms that are not currently active give an error that says: An invalid form control with name='' is not focusable.
For example, I have:
Parent Component:
<Paper style={styles.well} >
<Container style={styles.grid}>
<Row>
<Col xs={12} sm={12} md={8} lg={6} >
<Form >
<Form.Group controlId="name">
<Form.Label>Name *</Form.Label>
<Form.Control placeholder="Enter name" name='name' value={this.state.name} onChange={this.handleChange}/>
</Form.Group>
<Form.Group controlId="description">
<Form.Label>Description </Form.Label>
<Form.Control as='textarea' placeholder="Enter Description"= name='description' required value={this.state.description} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="pay">
<Form.Label>Pay *</Form.Label>
<Form.Control as="select" placeholder="select" name='pay' value={this.state.pay} onChange={this.handleChange}>
<option value="select"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</Form.Control>
</Form.Group>
</Form>
</Col>
{this.state.pay === '' ? <div></div>
: <TabContent onResetValidation={this.handleResetValidation} validateForms={this.state.validateForms} payType={this.state.pay}/>}
<Container>
<Row style={{paddingBottom:'15px', paddingTop:'10px'}}>
<Col xs={12} sm={12} md={12} lg={12} >
{this.state.pay === '' ? <div></div> :
<Button onClick={this.submitForms} variant='primary' size='large'>Submit Form
</Button>
}
</Col>
</Row>
</Container>
Tab Content Component:
<Container style={{paddingTop:'30px', width:'100%'}}>
<Row>
<Col xs={12} md={12} lg={12} >
<Tabs id={'PayTabs'} defaultActiveKey={1} >
<Tab eventKey={1} title="Tab 1">
<div style={{paddingTop:'20px'}}>
<Tab1 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={2} title="Tab 2">
<div style={{paddingTop:'20px'}}>
<Tab2 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={3} title="Tab 3">
<div style={{paddingTop:'20px'}}>
<Tab3 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
</Tabs>
</Col>
</Row>
Each child tab component looks like this:
export class Tab1 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillReceiveProps(nextProps, nextContent) {
if (nextProps.validateForms !== this.state.validateForms) {
if (nextProps.validateForms === true) {
debugger
console.log("Tab1");
this.form.submitButton.click();
this.props.onResetValidation();
}
}
}
render() {
return (
<Container style={{width: '100%', paddingBottom:'25px'}}>
<Row>
<Col xs={12} md={12} lg={12} style={{marginLeft:'-25px', marginTop:'-15px'}}>
<MyForm name='form' ref={(form) => {this.form=form;}}/>
</Col>
</Row>
</Container>
);
}
}
The MyForm component:
function Tpl(props) {
const {id, label, required, children} = props;
return (
<div className="myfield">
<label htmlFor={id}>{label}{required ? "*" : null}</label>
{children}
</div>
);
}
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {}
}
}
onSubmit(formData) {
//this only gets called if the validation is successful
console.log(formData);
}
onError(formData) {
console.log(formData)
}
render () {
return (
<Form2 FieldTemplate={Tpl} onError={this.onError} onChange={({ formData }) => this.setState({ formData })} formData={this.state.formData} schema={schema} onSubmit={this.onSubmit} className="component-container">
<button ref={(btn) => {this.submitButton=btn;}} style={{"display": "none"}}/>
</Form2>
);
}
}
javascript reactjs react-jsonschema-forms
asked Jan 2 at 17:22
JDunJDun
599
add a comment |
0
0
0
I'm fairly new to react-jsonschema-form and I'm trying to figure out how to validate multiple forms with a parent button's click. Right now I have a parent component that holds tabs and a submit button. Each tab contains a react-jsonschema-form. Is there a way to have the forms within each tab validate upon the parent submit buttons click? I'm able to console.log the tab names when the submit button is clicked, BUT the forms that are not currently active give an error that says: An invalid form control with name='' is not focusable.
For example, I have:
Parent Component:
<Paper style={styles.well} >
<Container style={styles.grid}>
<Row>
<Col xs={12} sm={12} md={8} lg={6} >
<Form >
<Form.Group controlId="name">
<Form.Label>Name *</Form.Label>
<Form.Control placeholder="Enter name" name='name' value={this.state.name} onChange={this.handleChange}/>
</Form.Group>
<Form.Group controlId="description">
<Form.Label>Description </Form.Label>
<Form.Control as='textarea' placeholder="Enter Description"= name='description' required value={this.state.description} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="pay">
<Form.Label>Pay *</Form.Label>
<Form.Control as="select" placeholder="select" name='pay' value={this.state.pay} onChange={this.handleChange}>
<option value="select"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</Form.Control>
</Form.Group>
</Form>
</Col>
{this.state.pay === '' ? <div></div>
: <TabContent onResetValidation={this.handleResetValidation} validateForms={this.state.validateForms} payType={this.state.pay}/>}
<Container>
<Row style={{paddingBottom:'15px', paddingTop:'10px'}}>
<Col xs={12} sm={12} md={12} lg={12} >
{this.state.pay === '' ? <div></div> :
<Button onClick={this.submitForms} variant='primary' size='large'>Submit Form
</Button>
}
</Col>
</Row>
</Container>
Tab Content Component:
<Container style={{paddingTop:'30px', width:'100%'}}>
<Row>
<Col xs={12} md={12} lg={12} >
<Tabs id={'PayTabs'} defaultActiveKey={1} >
<Tab eventKey={1} title="Tab 1">
<div style={{paddingTop:'20px'}}>
<Tab1 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={2} title="Tab 2">
<div style={{paddingTop:'20px'}}>
<Tab2 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={3} title="Tab 3">
<div style={{paddingTop:'20px'}}>
<Tab3 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
</Tabs>
</Col>
</Row>
Each child tab component looks like this:
export class Tab1 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillReceiveProps(nextProps, nextContent) {
if (nextProps.validateForms !== this.state.validateForms) {
if (nextProps.validateForms === true) {
debugger
console.log("Tab1");
this.form.submitButton.click();
this.props.onResetValidation();
}
}
}
render() {
return (
<Container style={{width: '100%', paddingBottom:'25px'}}>
<Row>
<Col xs={12} md={12} lg={12} style={{marginLeft:'-25px', marginTop:'-15px'}}>
<MyForm name='form' ref={(form) => {this.form=form;}}/>
</Col>
</Row>
</Container>
);
}
}
The MyForm component:
function Tpl(props) {
const {id, label, required, children} = props;
return (
<div className="myfield">
<label htmlFor={id}>{label}{required ? "*" : null}</label>
{children}
</div>
);
}
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {}
}
}
onSubmit(formData) {
//this only gets called if the validation is successful
console.log(formData);
}
onError(formData) {
console.log(formData)
}
render () {
return (
<Form2 FieldTemplate={Tpl} onError={this.onError} onChange={({ formData }) => this.setState({ formData })} formData={this.state.formData} schema={schema} onSubmit={this.onSubmit} className="component-container">
<button ref={(btn) => {this.submitButton=btn;}} style={{"display": "none"}}/>
</Form2>
);
}
}
javascript reactjs react-jsonschema-forms
asked Jan 2 at 17:22
JDunJDun
599
I'm fairly new to react-jsonschema-form and I'm trying to figure out how to validate multiple forms with a parent button's click. Right now I have a parent component that holds tabs and a submit button. Each tab contains a react-jsonschema-form. Is there a way to have the forms within each tab validate upon the parent submit buttons click? I'm able to console.log the tab names when the submit button is clicked, BUT the forms that are not currently active give an error that says: An invalid form control with name='' is not focusable.
For example, I have:
Parent Component:
<Paper style={styles.well} >
<Container style={styles.grid}>
<Row>
<Col xs={12} sm={12} md={8} lg={6} >
<Form >
<Form.Group controlId="name">
<Form.Label>Name *</Form.Label>
<Form.Control placeholder="Enter name" name='name' value={this.state.name} onChange={this.handleChange}/>
</Form.Group>
<Form.Group controlId="description">
<Form.Label>Description </Form.Label>
<Form.Control as='textarea' placeholder="Enter Description"= name='description' required value={this.state.description} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="pay">
<Form.Label>Pay *</Form.Label>
<Form.Control as="select" placeholder="select" name='pay' value={this.state.pay} onChange={this.handleChange}>
<option value="select"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</Form.Control>
</Form.Group>
</Form>
</Col>
{this.state.pay === '' ? <div></div>
: <TabContent onResetValidation={this.handleResetValidation} validateForms={this.state.validateForms} payType={this.state.pay}/>}
<Container>
<Row style={{paddingBottom:'15px', paddingTop:'10px'}}>
<Col xs={12} sm={12} md={12} lg={12} >
{this.state.pay === '' ? <div></div> :
<Button onClick={this.submitForms} variant='primary' size='large'>Submit Form
</Button>
}
</Col>
</Row>
</Container>
Tab Content Component:
<Container style={{paddingTop:'30px', width:'100%'}}>
<Row>
<Col xs={12} md={12} lg={12} >
<Tabs id={'PayTabs'} defaultActiveKey={1} >
<Tab eventKey={1} title="Tab 1">
<div style={{paddingTop:'20px'}}>
<Tab1 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={2} title="Tab 2">
<div style={{paddingTop:'20px'}}>
<Tab2 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
<Tab eventKey={3} title="Tab 3">
<div style={{paddingTop:'20px'}}>
<Tab3 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
</div>
</Tab>
</Tabs>
</Col>
</Row>
Each child tab component looks like this:
export class Tab1 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillReceiveProps(nextProps, nextContent) {
if (nextProps.validateForms !== this.state.validateForms) {
if (nextProps.validateForms === true) {
debugger
console.log("Tab1");
this.form.submitButton.click();
this.props.onResetValidation();
}
}
}
render() {
return (
<Container style={{width: '100%', paddingBottom:'25px'}}>
<Row>
<Col xs={12} md={12} lg={12} style={{marginLeft:'-25px', marginTop:'-15px'}}>
<MyForm name='form' ref={(form) => {this.form=form;}}/>
</Col>
</Row>
</Container>
);
}
}
The MyForm component:
function Tpl(props) {
const {id, label, required, children} = props;
return (
<div className="myfield">
<label htmlFor={id}>{label}{required ? "*" : null}</label>
{children}
</div>
);
}
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {}
}
}
onSubmit(formData) {
//this only gets called if the validation is successful
console.log(formData);
}
onError(formData) {
console.log(formData)
}
render () {
return (
<Form2 FieldTemplate={Tpl} onError={this.onError} onChange={({ formData }) => this.setState({ formData })} formData={this.state.formData} schema={schema} onSubmit={this.onSubmit} className="component-container">
<button ref={(btn) => {this.submitButton=btn;}} style={{"display": "none"}}/>
</Form2>
);
}
}
javascript reactjs react-jsonschema-forms
javascript reactjs react-jsonschema-forms
asked Jan 2 at 17:22
JDunJDun
599
asked Jan 2 at 17:22
JDunJDun
599
asked Jan 2 at 17:22
JDunJDun
599
asked Jan 2 at 17:22
JDunJDun
599
asked Jan 2 at 17:22
JDunJDun
599
599
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010583%2fhow-to-validate-multiple-react-jsonschema-form-in-tabs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010583%2fhow-to-validate-multiple-react-jsonschema-form-in-tabs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
