Validate radio buttons with jquery

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.

[code]

<form>
<input type=’radio’ name=’image_quality’ disabled=’disabled’>
<input type=’radio’ name=’image_quality’>
<input type=’radio’ name=’image_quality’>
<input type=’submit’ id=’save’>

<div class=”error-message”></div>
</form>

[/code]

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 [code]window.scrollTo(0,0)[/code] 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.

[code]

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

[/code]

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

 

 

CategoriesUncategorized

Leave a Reply

Your email address will not be published.