JSFiddle - React, Tailwind, and code Playground

HTML

<form accept-charset="UTF-8" action="/report" id="report-form" method="post">
	<div class="form-group">
		<input id="report_reason_1" name="report_reason" type="radio" value="1">
		<label for="report_reason_l">Inappropriate Photo</label>
	</div>
	<div class="form-group">
		<input id="report_reason_2" name="report_reason" type="radio" value="2">
		<label for="report_reason_l">Seems Like Spam</label>
	</div>
	<div class="form-group">
		<input id="report_reason_3" name="report_reason" type="radio" value="3">
		<label for="report_reason_l">Underage User</label>
	</div>
	<div class="form-group">
		<input id="report_reason_0" name="report_reason" type="radio" value="0">
		<label for="report_reason_l">Other</label>
	</div>
	<div class="form-group">
		<textarea autofocus="autofocus" class="form-control" id="report_description" name="report_description" placeholder="Description..." rows="3"></textarea>
	</div>
	<input id="reportee_id" name="reportee_id" type="hidden" value="4">
	<div class="form-group">
		<input class="btn btn-primary" id="submit-report" name="commit" type="submit" value="Report">
	</div>

</form>

JavaScript

$(function() {
	$('#report-form').validate({
		rules: {
			'report_description' : {
				required : true
			}
		},
		messages: {
			'report_description' : {
				required : "Please mention the reason for reporting this"
			}
		},
		submitHandler: function(form) {
			form.submit();
		}
	});
});