JSFiddle - React, Tailwind, and code Playground

HTML

<div id="errors"></div>
<form class="cms-form">
    <textarea name="icon" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}">/location-to-image.png</textarea>
    <button type="submit">Submit</button>
</form>

CSS

#errors {
    background: red;
}

JavaScript

$('textarea[name=icon]').on('customValidate', function(evt, reporter) {
    var options = $(this).data('options');

    // ... your validation here ...
    
    // for example:
    var txt = $(this).val();
    if( txt.length < options.min || txt.length > options.max ) {
        reporter.reportValidationError('error: "icon" min/max exceeded!');
    }
})


$('form.cms-form').on('submit', function(evt) {
    var frm = $(this);
    var allElements = $(this.elements);
    $('#errors').empty();   
    
    var errors = [];
    var arg = {
        reportValidationError : function( msg ) {
            errors.push(msg);
        },
        form : this
    };
    console.log("all elements: ", allElements);
    allElements.trigger('customValidate', [ arg ]);
    
    if( errors.length !== 0 ) {
        showValidationErrors(errors);
        return false;
    }
    return true;
});
    
function showValidationErrors( errs ) {
    var el = $('#errors');

    errs.forEach(function(errMsg) {
        item = $('<span class="error" />').text(errMsg);
        el.append(item);
    });
}