Making radio buttons a required selection by user - php

Question

I have 5 radio buttons that offer a range of values :
<input type="radio" name="bookperiod" id="bookperiod" value="1"/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>
I want it to make sure the user has selected them, because currently the user can not select one and the form will still submit. While I could make one of them "checked", this could mean the user could still submit without actually making a selection.
How can I make sure that when the user hits submit the user has definitely selected one of their of accord.

Answer 1

This is a typical use-case for the required attribute.
Modern browsers don't let you submit the form if no radio button is selected, even with JavaScript disabled.
<form action="">
<input type="radio" name="bookperiod" id="bookperiod" value="1" required />1<br />
<input type="radio" name="bookperiod" id="bookperiod" value="2" required />2<br />
<input type="radio" name="bookperiod" id="bookperiod" value="3" required />3<br />
<input type="radio" name="bookperiod" id="bookperiod" value="4" required />4<br />
<input type="radio" name="bookperiod" id="bookperiod" value="5" required />5<br />
<button type="submit">Submit</button>
</form>
http://jsfiddle.net/feeela/5cJj8/
A simple JS validation for required radio buttons:
document.forms[0].addEventListener( 'submit', function( event ) {
event.preventDefault();
var form = event.target,
radioHasCheckedButton = form.querySelector( 'input[required][name="bookperiod"]:checked' );
if( !radioHasCheckedButton ) {
// Error handling here – no radio button was checked
console.log( 'Some required fields are missing.' );
}
else {
// Everything is fine – finally submit the form
form.submit();
}
}, false );

Answer 2

I feel like all these answers are barely getting by. First of all: you CANNOT have multiple elements with the same ID. Change that to a class or label each one uniquely!
You cannot skip the PHP check. This must always be done. Please read contents related to server-side vs client-side especially on validation. I won't go into it here.
Adding the client-side (Javascript) check is for user convenience ONLY. This allows the user to know the form is incomplete before hitting the submit button and having to wait on the server.
This can be done in a couple of ways and more...
Add an additional radio button with visibility or display turned off with CSS. This would be checked by default. With javascript you can see if this is still the radio button that is selected (meaning the user has not selected one of the visible ones) => display error
Iterate over each radio button and ensure one of them is marked checked (standard if inside a for loop) untested jqyery code.
function validateBookPeriod() {
var bookperiodSelected = false;
$('.bookperiod').each(function(){
if($this.attr('checked') == checked) bookperiodSelected=true;
});
if (bookperiodSelected == false)
alert('Please select a book period!');
}
validateBookPeriod();

Answer 3

you can pre-select one for the user, then the user will be forced to select another option or accept the first
<input type="radio" checked name="bookperiod" id="bookperiod" value="1"/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>