JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" value="1">
<input type="radio" name="gender" value="2">
<div id="name_error">name error</div>
<div id="gender_error">gender error</div>
<br />
<input type="button" id="validate" value="validate" />

CSS

#name_error, #gender_error {
    display:none;
}
#name_error {
    color:orange;
}
#gender_error {
    color:red;
}

JavaScript

$("#validate").click(function () {
    $('#name_error,#gender_error').fadeOut();
    var name = jQuery('#name').val();
    if (name.length == 0) {
        jQuery('#name_error').fadeIn(500);
    }
    if (!($("input[name='gender']").prop("checked"))) {
        $('#gender_error').fadeIn(500);
    }
});