JSFiddle - React, Tailwind, and code Playground

by Tiago Antonio Jacobi

HTML

<ul id="questions">
        <li>
            <span><label for="name">Guest Name</label></span>
            <input class="name" id="name" type="text"  name="name" >
        </li>   
        <li>
            <span><label for="age">Age</label></span>
            <input class="age" id="age" type="text"  name="age" >
        </li>
    </ul>
    <input type="button" onclick="validateValues();" value="validate" >

CSS

ul li{
    list-style: none;   
}

ul li span {
    display: block;
}

ul li input.error {
    color: red;
}

ul li span.error {
    color: red;
    margin-top: -22px;
    margin-left: 5px;
}

JavaScript

function validateValues() {
    $("span.error").remove();
    $("input").removeClass("error");
    
    if ($("#name").val().trim().length <= 0 ) {
        $("#name").val("Name is required.");
        $("#name").addClass("error");
    }
    
    if ($("#age").val().trim().length <= 0 ) {
        $("#age").val("Age is required.");
        $("#age").addClass("error");
    } else if (parseInt($("#age").val()) < 18 || parseInt($("#age").val()) > 45 ) {
        var msg = $('<span class="error">Age range 18 to 45.</span>');
        $("#age").parent().append(msg);
    }
}