Material UI - Replicating the “required” text field error message
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
reactjs material-ui
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
add a comment |
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
reactjs material-ui
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
For anyone wondering the same thing regarding Material UI, <Radio required /> has the same effect. Still working on figuring out one for the <Select /> component.
– Jacobjanak
Aug 29 '18 at 0:54
<Select native required /> works
– Jacobjanak
Aug 29 '18 at 1:25
add a comment |
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
reactjs material-ui
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
reactjs material-ui
reactjs material-ui
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
asked Aug 28 '18 at 23:35
JacobjanakJacobjanak
657
657
For anyone wondering the same thing regarding Material UI, <Radio required /> has the same effect. Still working on figuring out one for the <Select /> component.
– Jacobjanak
Aug 29 '18 at 0:54
<Select native required /> works
– Jacobjanak
Aug 29 '18 at 1:25
add a comment |
For anyone wondering the same thing regarding Material UI, <Radio required /> has the same effect. Still working on figuring out one for the <Select /> component.
– Jacobjanak
Aug 29 '18 at 0:54
<Select native required /> works
– Jacobjanak
Aug 29 '18 at 1:25
For anyone wondering the same thing regarding Material UI, <Radio required /> has the same effect. Still working on figuring out one for the <Select /> component.
– Jacobjanak
Aug 29 '18 at 0:54
For anyone wondering the same thing regarding Material UI, <Radio required /> has the same effect. Still working on figuring out one for the <Select /> component.
– Jacobjanak
Aug 29 '18 at 0:54
<Select native required /> works
– Jacobjanak
Aug 29 '18 at 1:25
<Select native required /> works
– Jacobjanak
Aug 29 '18 at 1:25
add a comment |
3 Answers
3
active
oldest
votes
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
add a comment |
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
It would be because of therequiredattribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...
– andriusain
Aug 28 '18 at 23:56
add a comment |
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
add a comment |
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%2f52067514%2fmaterial-ui-replicating-the-required-text-field-error-message%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
add a comment |
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
add a comment |
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
answered Aug 28 '18 at 23:58
WesgurWesgur
7431619
7431619
add a comment |
add a comment |
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
It would be because of therequiredattribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...
– andriusain
Aug 28 '18 at 23:56
add a comment |
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
It would be because of therequiredattribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...
– andriusain
Aug 28 '18 at 23:56
add a comment |
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
answered Aug 28 '18 at 23:39
andriusainandriusain
394110
394110
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
It would be because of therequiredattribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...
– andriusain
Aug 28 '18 at 23:56
add a comment |
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
It would be because of therequiredattribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...
– andriusain
Aug 28 '18 at 23:56
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
Good idea! I checked Firefox and it does indeed display differently than Chrome
– Jacobjanak
Aug 28 '18 at 23:44
It would be because of the
required attribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...– andriusain
Aug 28 '18 at 23:56
It would be because of the
required attribute in the input field... browsers handle these things very differently... if you want a consistent experience then consider not using it... however you will have to get around the validation...– andriusain
Aug 28 '18 at 23:56
add a comment |
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
add a comment |
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
add a comment |
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
answered Nov 13 '18 at 23:51
byverdubyverdu
4315
4315
add a comment |
add a comment |
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%2f52067514%2fmaterial-ui-replicating-the-required-text-field-error-message%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
For anyone wondering the same thing regarding Material UI, <Radio required /> has the same effect. Still working on figuring out one for the <Select /> component.
– Jacobjanak
Aug 29 '18 at 0:54
<Select native required /> works
– Jacobjanak
Aug 29 '18 at 1:25