Radio button validation in JQuery

Today we’re going to talk about a great way to validate radio buttons using jQuery.

Radio buttons are often used in forms and they are a great way to let your users select one option from multiple options.

With just a few lines of code, we can quickly and easily check if the user has selected one of the available options before submitting the form.

If they haven't selected an option, we'll add an outline to the radio button using jQuery css() Method.

The following example is checking that at least one radio button has been checked by the user.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<form>
 <input type="radio" name="gender" value="Male"> Male<br>
 <input type="radio" name="gender" value="Female"> Female<br>
 <input type="radio" name="gender" value="Other"> Other<br>
 <button id="submit" type="button"> Submit </button>  
</form>
<script>
$('#submit').click(function () {
    if ($('input[name=gender]:checked').length <= 0) {      
        $('input[name=gender]').css('outline', '1px solid red');
    }
    else {        
        $('input[name=gender]').css('outline', 'none');
    }
});
</script>

Click on the Try it Yourself » button to open the code in our online editor.