HTML5: How to use the “required” attribute with a “radio” input field
I am just wondering how to use the new HTML5 input attribute "required" the right way on radiobuttons. Does every radiobutton field need the attribute like below? Or is it sufficient if only one field gets it?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html5 radio-button required
edited Jan 16 at 23:56
naXa
14k892137
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
add a comment |
I am just wondering how to use the new HTML5 input attribute "required" the right way on radiobuttons. Does every radiobutton field need the attribute like below? Or is it sufficient if only one field gets it?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html5 radio-button required
edited Jan 16 at 23:56
naXa
14k892137
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
add a comment |
I am just wondering how to use the new HTML5 input attribute "required" the right way on radiobuttons. Does every radiobutton field need the attribute like below? Or is it sufficient if only one field gets it?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html5 radio-button required
edited Jan 16 at 23:56
naXa
14k892137
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
I am just wondering how to use the new HTML5 input attribute "required" the right way on radiobuttons. Does every radiobutton field need the attribute like below? Or is it sufficient if only one field gets it?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html5 radio-button required
html5 radio-button required
edited Jan 16 at 23:56
naXa
14k892137
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
edited Jan 16 at 23:56
naXa
14k892137
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
edited Jan 16 at 23:56
naXa
14k892137
edited Jan 16 at 23:56
naXa
14k892137
edited Jan 16 at 23:56
naXa
14k892137
14k892137
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
asked Nov 27 '11 at 18:13
nerdessnerdess
3,60273041
3,60273041
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
Set the required attribute for at least one input of the radio group.
Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>Also take note of:
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
Source
edited Jan 13 '18 at 16:46
JBallin
1,0641120
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
55
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
4
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
3
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
|
show 3 more comments
try out this...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Find JSFIDDLE
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
add a comment |
If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.
The way to fix it is to replace display:none with opacity:0
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
answered Sep 13 '17 at 12:40
jamesjames
5941617
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden viadisplay:none. Thats already answered here: stackoverflow.com/questions/49687229/…
– Seybsen
Jul 31 '18 at 8:54
add a comment |
Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
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%2f8287779%2fhtml5-how-to-use-the-required-attribute-with-a-radio-input-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Set the required attribute for at least one input of the radio group.
Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>Also take note of:
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
Source
edited Jan 13 '18 at 16:46
JBallin
1,0641120
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
55
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
4
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
3
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
|
show 3 more comments
Set the required attribute for at least one input of the radio group.
Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>Also take note of:
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
Source
edited Jan 13 '18 at 16:46
JBallin
1,0641120
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
55
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
4
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
3
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
|
show 3 more comments
Set the required attribute for at least one input of the radio group.
Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>Also take note of:
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
Source
edited Jan 13 '18 at 16:46
JBallin
1,0641120
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
Set the required attribute for at least one input of the radio group.
Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>Also take note of:
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
Source
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form><form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>edited Jan 13 '18 at 16:46
JBallin
1,0641120
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
edited Jan 13 '18 at 16:46
JBallin
1,0641120
edited Jan 13 '18 at 16:46
JBallin
1,0641120
edited Jan 13 '18 at 16:46
JBallin
1,0641120
1,0641120
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
answered Nov 27 '11 at 18:31
SeybsenSeybsen
9,60532962
9,60532962
55
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
4
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
3
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
|
show 3 more comments
55
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
4
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
3
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
55
55
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
An very important thing you need to remember is that the radio and checkbox inputs are grouped by the name attribute. So, setting required on any one of the inputs (among a group of inputs having the same name) would work. If, on the other hand, you miss out on the name attribute, it won't work as you'd expect.
– kumar_harsh
Jun 4 '14 at 5:39
4
4
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh Very good point. A typical case of someone omitting the name is when using Angular ng-model instead.
– John Henckel
Aug 19 '15 at 14:10
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group
– Nick Humphrey
Oct 7 '15 at 10:33
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details)
– kumar_harsh
Oct 7 '15 at 12:54
3
3
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example)
– Seybsen
Dec 30 '16 at 10:30
|
show 3 more comments
try out this...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Find JSFIDDLE
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
add a comment |
try out this...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Find JSFIDDLE
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
add a comment |
try out this...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Find JSFIDDLE
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
try out this...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Find JSFIDDLE
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
answered Dec 3 '13 at 5:19
VijayVijay
5,10173361
5,10173361
add a comment |
add a comment |
If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.
The way to fix it is to replace display:none with opacity:0
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
answered Sep 13 '17 at 12:40
jamesjames
5941617
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden viadisplay:none. Thats already answered here: stackoverflow.com/questions/49687229/…
– Seybsen
Jul 31 '18 at 8:54
add a comment |
If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.
The way to fix it is to replace display:none with opacity:0
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
answered Sep 13 '17 at 12:40
jamesjames
5941617
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden viadisplay:none. Thats already answered here: stackoverflow.com/questions/49687229/…
– Seybsen
Jul 31 '18 at 8:54
add a comment |
If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.
The way to fix it is to replace display:none with opacity:0
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
answered Sep 13 '17 at 12:40
jamesjames
5941617
If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.
The way to fix it is to replace display:none with opacity:0
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
answered Sep 13 '17 at 12:40
jamesjames
5941617
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
edited Feb 21 '18 at 11:30
DragonBorn
1,0631928
1,0631928
answered Sep 13 '17 at 12:40
jamesjames
5941617
answered Sep 13 '17 at 12:40
jamesjames
5941617
answered Sep 13 '17 at 12:40
jamesjames
5941617
5941617
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden viadisplay:none. Thats already answered here: stackoverflow.com/questions/49687229/…
– Seybsen
Jul 31 '18 at 8:54
add a comment |
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden viadisplay:none. Thats already answered here: stackoverflow.com/questions/49687229/…
– Seybsen
Jul 31 '18 at 8:54
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden via
display:none. Thats already answered here: stackoverflow.com/questions/49687229/…– Seybsen
Jul 31 '18 at 8:54
I guess you mean that the browser's errormessage is not visible if the radio button itself is hidden via
display:none. Thats already answered here: stackoverflow.com/questions/49687229/…– Seybsen
Jul 31 '18 at 8:54
add a comment |
Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
add a comment |
Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
add a comment |
Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
edited Sep 14 '18 at 10:06
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
answered Sep 14 '18 at 9:42
JoostSJoostS
6,15521636
6,15521636
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%2f8287779%2fhtml5-how-to-use-the-required-attribute-with-a-radio-input-field%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
