JSFiddle - React, Tailwind, and code Playground

by jquery4u

HTML

<div class="control-group">
    <div class="control-group-inner">
        <label class="control-label" for="friend1-name">Friend's name</label>
        <div class="controls">
            <input type="text" name="friend1-name" placeholder="Friend's name... " />
        </div>
    </div>
    <div class="control-group-inner">
        <label class="control-label" for="friend1-email">Email Address</label>
        <div class="controls">
            <input type="text" name="friend1-email" placeholder="Email Address... " />
        </div>
    </div>
</div>

CSS

.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}

JavaScript

//custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var targetEl = $('input[name="'+options.data+'"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    //trigger error class on target input
    if (!bothEmpty && targetEmpty)
    {
        //error msg doesn't exist yet so wait...
        setTimeout(function()
        {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0)
            {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("<label class='error fieldPresentError'>Friend's name and email required.</label>");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
},
    "Friend's name and email required."
);