In this short article I’ll show you how you can validate some simple radio-buttons using jQuery, other then that we will, also scroll to the top and show a simple red text with the a message.

As you can see on the code below it’s a simple form with some radio-buttons and a submit button.

<p>&lt;form&gt;<br />
&lt;input type='radio' name='image_quality' disabled='disabled'&gt;<br />
&lt;input type='radio' name='image_quality'&gt;<br />
&lt;input type='radio' name='image_quality'&gt;<br />
&lt;input type='submit' id='save'&gt;</p>
<p>&lt;div class="error-message"&gt;&lt;/div&gt;<br />

Then we vavlidate them using the jQuery bellow, this code says, when the save button is clicked, execute the function and look if the input with the name image_quality is not chaged (notice the ! mark), then do what is bellow, with is scroll to the top with the

functions to the Coordinates 0,0 which means all the way to the top, and also applend a paragraf to the divider with the class error-message which says please choose a radio button and return false so don’t let the form execute.

<p>//validate the image qualification<br />
$('#save').click(function(){<br />
if (!$("input[name='image_quality']:checked").val()) {<br />
window.scrollTo(0, 0);<br />
$( ".error-message" ).append( "&lt;p style='color:red;'&gt;please choose a radio button&lt;/p&gt;" );<br />
return false;<br />
}<br />
})<br />
//validate the image qualification</p>

That is all. All you need is this small peace of jQuery.