JSFiddle - React, Tailwind, and code Playground

by Stephen Lujan

HTML

<label for="name">Name:</label>
<input id="name" type="text" name="garage">
<label id="name-error" class="hidden error" for="name" required>invalid name</label>
<br/>
<button id="create">create</button>
<div id="garage-container"></div>

CSS

* {
    margin: 5px;
}
.hidden {
    display: none;
}
.error {
    color: red;
}

JavaScript

$(function () {
    $('#create').click(function () {
        //get contents of the name input
        var name = $('#name').val();
       	//if it's empty ensure the error message is visible
        if (name == "") {
            $('#name-error').removeClass('hidden');
        //if it's not empty ensure the error message
        // is not visible and take your desired action
        } else {
            $('#name-error').addClass('hidden');
            $('#garage-container').append(
                '<p>' + name + '</p>');
            $('#name').val("");
        }
    });
});