JSFiddle - React, Tailwind, and code Playground

HTML

<section id="respond" class="respond secondary_respond">
    <form action="" method="post" id="commentform">
        <div class="line">
            <label for="secondary_comment_author" title="Please enter your name (required)">Your name <span class="required">*</span>

            </label>
            <input type="text" name="author" id="secondary_comment_author" value="" tabindex="1" required="required" class="input" placeholder="John Smith" />
        </div>
        <div class="line">
            <label for="secondary_comment_email" title="Please enter your email (required)">Your email <span class="required">*</span>

            </label>
            <input type="text" name="email" id="secondary_comment_email" value="" tabindex="2" required="required" class="input" placeholder="mail@example.com" />
        </div>
        <div class="line" id="message-box">
            <label for="secondary_comment_textarea" title="Please enter your message (required)">Your review and rating<span class="required">*</span>

            </label>
            <textarea name="comment" id="secondary_comment_textarea" class="input textarea" maxlength="300" rows="7" tabindex="3" required="required"></textarea>
<span class="secondary-rating clear form_error"> <input type="radio" id="star5" name="rating" value="5"><label class="nomargin icon-star-on" for="star5"></label> <input type="radio" id="star4" name="rating" value="4"><label class="nomargin icon-star-on" for="star4"></label> <input type="radio" id="star3" name="rating" value="3"><label class="nomargin icon-star-on" for="star3"></label> <input type="radio" id="star2" name="rating" value="2"><label class="nomargin icon-star-on" for="star2"></label> <input type="radio" id="star1" name="rating" value="1"><label class="nomargin icon-star-on" for="star1"></label> </span>	
        </div>
        <p class="submit">
            <button name="submit" class="button submit" type="submit" id="submit" tabindex="5">Submit Comment</button>
      ...

CSS

/* MAIN SETUP */
 *, :before, :after {
    box-sizing: border-box;
}
body {
    font: 16px/25px'Helvetica Neue', Arial, sans-serif;
    margin: 2em;
}
div, form, ul, li {
    position: relative;
}
form {
    margin: 0;
}
label {
    cursor: pointer;
    display: block;
    font-weight: bold;
}
label span.required {
    color: #F00;
}
button, input, select, textarea {
    font-size:100%;
    margin:0;
    vertical-align:baseline;
    border: 1px solid #AAA;
    border-radius:2px;
    min-height: 40px;
    width: 100%;
    padding: 10px;
}
button, input {
    line-height:normal;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance:button;
    cursor:pointer;
}
button[disabled], input[disabled] {
    cursor:default;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing:border-box;
    padding:0;
    width: 25px;
}
input[type="search"] {
    -webkit-appearance:none;
    box-sizing:content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border:0;
    padding:0;
}
textarea {
    overflow:auto;
    vertical-align:top;
    resize:vertical;
    padding:1em;
    width:100%;
    font-size:1em;
}
div.alert {
    background: #DDD;
    margin: 1em 0;
    border: 1px solid #AAA;
    line-height: 40px;
    padding: 10px 2em;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 2px;
}
.respond input.form_error, .respond textarea.form_error {
    border-color: #EE5C42;
}
.respond span.secondary-rating.form_error {
    background-color: rgba(238, 92, 66, 0.25);
}
.secondary_comments .commentlist {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.secondary_comments .commentlist:after {
    content:"";
    width: 100%;
    display: inline-block;
    font-size: 0;
   ...

JavaScript

// Comment form submission
$("section#respond").submit(function () {
    var isFormValid = true;

    $('div.alert.red.form_error').remove();

    $('[required="required"]').each(function () {
        if ($.trim($(this).val()).length == 0) {
            $(this).addClass('form_error');

            $('#commentform').before('<div class="alert red form_error">Please fill in all the fields marked with an asterisks.</div>');

            return false;
        } else {
            $('#respond input, #respond textarea').removeClass('form_error');
        }
    });

    if ($('input[name="rating"]:not(:checked)').val()) {
        $('span.secondary-rating').addClass('form_error');
        $('div.alert.red.form_error').append(' This includes the star rating.');
        return false;
    } else {
        $('#respond span').removeClass('form_error');
    }
});