JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<input type="text" class="form-control" id="name" name="name" placeholder="Name" />
<br />
<input type="submit" id="btnSubmit" />

JavaScript

function displayError(fieldID, errorClass, errorMessage) {
    if ($('#' + fieldID).next('.' + errorClass).length == 0) {
        $('#' + fieldID).after('<div class="' + errorClass + '">' + errorMessage + '</div>');
    }
}

$(function () {
    $('#btnSubmit').on('click', function () {
        event.preventDefault;
        // Validate
        if ($('#name').val() == '') {
            // Name field is empty
            displayError('name', 'error_name', 'You must enter your name.');
        }
    });
});