React form validation when nesting a custom Input component
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Given the form listed here following, I have added some custom Input components that handle their own validation individually. However this approach has left me needing a way to bubble up those validation failures to the parent form component. What is the best if any approach to achieving this?
form:
<form onSubmit={this.handleFormSubmit}>
<Input
label={true}
type='email'
name='email'
placeholder='enter email'
value={this.email}
handleUpdateInput={this.onUpdateInput}/>
<button type='submit'>Submit</button>
</form>
Input:
validate = () => {
...validate
}
render() {
const {label, name, type, placeholder, value, handleUpdateInput, required} = this.props
let invalidStyle = !this.isValidated ? 'invalid' : null
return (
<label>
{label && <p>{name}</p>}
<input
className={invalidStyle}
type={type}
name={name}
placeholder={placeholder}
value={value}
onChange={handleUpdateInput}
onBlur={this.validate}
required={required}
autoComplete="new-password"/>
</label>
)
}
question:
what is the best approach to bubble the invalid prop up the the parent component holding the form without overriding that same param from another input also housed in the parent component?
ex: this input is invalid, so this.props.updateInvalid(true) adds an invalid param to the parent component, but then another Input returns this.props.updateInvalid(false) resetting the form check. How do I avoid this?
As always any and all direction is greatly appreciated, so thanks in advance!
reactjs forms validation
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
add a comment |
Given the form listed here following, I have added some custom Input components that handle their own validation individually. However this approach has left me needing a way to bubble up those validation failures to the parent form component. What is the best if any approach to achieving this?
form:
<form onSubmit={this.handleFormSubmit}>
<Input
label={true}
type='email'
name='email'
placeholder='enter email'
value={this.email}
handleUpdateInput={this.onUpdateInput}/>
<button type='submit'>Submit</button>
</form>
Input:
validate = () => {
...validate
}
render() {
const {label, name, type, placeholder, value, handleUpdateInput, required} = this.props
let invalidStyle = !this.isValidated ? 'invalid' : null
return (
<label>
{label && <p>{name}</p>}
<input
className={invalidStyle}
type={type}
name={name}
placeholder={placeholder}
value={value}
onChange={handleUpdateInput}
onBlur={this.validate}
required={required}
autoComplete="new-password"/>
</label>
)
}
question:
what is the best approach to bubble the invalid prop up the the parent component holding the form without overriding that same param from another input also housed in the parent component?
ex: this input is invalid, so this.props.updateInvalid(true) adds an invalid param to the parent component, but then another Input returns this.props.updateInvalid(false) resetting the form check. How do I avoid this?
As always any and all direction is greatly appreciated, so thanks in advance!
reactjs forms validation
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
In the parent are you using states? How are you currently storing the input? You can usually store the validation states in the parent in the same way
– J Dorrian
Nov 16 '18 at 21:23
add a comment |
Given the form listed here following, I have added some custom Input components that handle their own validation individually. However this approach has left me needing a way to bubble up those validation failures to the parent form component. What is the best if any approach to achieving this?
form:
<form onSubmit={this.handleFormSubmit}>
<Input
label={true}
type='email'
name='email'
placeholder='enter email'
value={this.email}
handleUpdateInput={this.onUpdateInput}/>
<button type='submit'>Submit</button>
</form>
Input:
validate = () => {
...validate
}
render() {
const {label, name, type, placeholder, value, handleUpdateInput, required} = this.props
let invalidStyle = !this.isValidated ? 'invalid' : null
return (
<label>
{label && <p>{name}</p>}
<input
className={invalidStyle}
type={type}
name={name}
placeholder={placeholder}
value={value}
onChange={handleUpdateInput}
onBlur={this.validate}
required={required}
autoComplete="new-password"/>
</label>
)
}
question:
what is the best approach to bubble the invalid prop up the the parent component holding the form without overriding that same param from another input also housed in the parent component?
ex: this input is invalid, so this.props.updateInvalid(true) adds an invalid param to the parent component, but then another Input returns this.props.updateInvalid(false) resetting the form check. How do I avoid this?
As always any and all direction is greatly appreciated, so thanks in advance!
reactjs forms validation
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
Given the form listed here following, I have added some custom Input components that handle their own validation individually. However this approach has left me needing a way to bubble up those validation failures to the parent form component. What is the best if any approach to achieving this?
form:
<form onSubmit={this.handleFormSubmit}>
<Input
label={true}
type='email'
name='email'
placeholder='enter email'
value={this.email}
handleUpdateInput={this.onUpdateInput}/>
<button type='submit'>Submit</button>
</form>
Input:
validate = () => {
...validate
}
render() {
const {label, name, type, placeholder, value, handleUpdateInput, required} = this.props
let invalidStyle = !this.isValidated ? 'invalid' : null
return (
<label>
{label && <p>{name}</p>}
<input
className={invalidStyle}
type={type}
name={name}
placeholder={placeholder}
value={value}
onChange={handleUpdateInput}
onBlur={this.validate}
required={required}
autoComplete="new-password"/>
</label>
)
}
question:
what is the best approach to bubble the invalid prop up the the parent component holding the form without overriding that same param from another input also housed in the parent component?
ex: this input is invalid, so this.props.updateInvalid(true) adds an invalid param to the parent component, but then another Input returns this.props.updateInvalid(false) resetting the form check. How do I avoid this?
As always any and all direction is greatly appreciated, so thanks in advance!
reactjs forms validation
reactjs forms validation
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
asked Nov 16 '18 at 20:37
studiobrainstudiobrain
3701417
3701417
In the parent are you using states? How are you currently storing the input? You can usually store the validation states in the parent in the same way
– J Dorrian
Nov 16 '18 at 21:23
add a comment |
In the parent are you using states? How are you currently storing the input? You can usually store the validation states in the parent in the same way
– J Dorrian
Nov 16 '18 at 21:23
In the parent are you using states? How are you currently storing the input? You can usually store the validation states in the parent in the same way
– J Dorrian
Nov 16 '18 at 21:23
In the parent are you using states? How are you currently storing the input? You can usually store the validation states in the parent in the same way
– J Dorrian
Nov 16 '18 at 21:23
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
});
}
});
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%2f53345048%2freact-form-validation-when-nesting-a-custom-input-component%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
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.
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%2f53345048%2freact-form-validation-when-nesting-a-custom-input-component%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
In the parent are you using states? How are you currently storing the input? You can usually store the validation states in the parent in the same way
– J Dorrian
Nov 16 '18 at 21:23