JSFiddle - React, Tailwind, and code Playground

by refhat

HTML

<form>
    Radio<span class="newmessage"></span><br><input type="radio" name="pr" value="1">FirstRadio<br><input type="radio" name="pr" value="2">FirstRadio<br><input type="radio" name="pr" value="3">FirstRadio<br><input type="radio" name="pr" value="4">FirstRadio<br><input type="radio" name="pr" value="5">FirstRadio<br><br>
    First<input type="text" class="required"><span></span><br><br>
    Second<input type="text" class="required"><span></span><br><br>
    Third<input type="text" class="required"><span></span><br><br>
    Fourth<input type="text" class="required"><span></span><br><br>
    Fifth<input type="text" class="required"><span></span><br><br>
    Last<input type="text" class="required"><span></span><br><br>
    <input type="submit" value="Validate">
</form>

CSS

.newmessage{color:red;}

JavaScript

function validForm() {
    var valid = true;
    if (($('input[name=pr]:checked').length == 0) ) {
        $(".newmessage").text("Please select one of the buttons");
}
    else {
    $(".newmessage").text(""); 
    }
    $(".required").each(function() {
        if ($(this).val() == "") {
            $(this).next().text("Required Field");
            valid = false;
        }
        else {
            $(this).next().text("");
        }
    })
    return valid;
}

$('form').submit(validForm);