JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fieldset">
			
			
			<div id ="email-cart-to-friend">
     
        <ul class="form-list" id="cart-email-form">
            <li class="fields">
                <div class="field">
                    <label class="required" for="name"><em>*</em>Your Name</label>
                    <div class="input-box">
                        <input type="text" class="input-text required-entry" value="" title="Name" id="your-name" name="name">
                    </div>
                </div>
                <div class="field">
                    <label class="required" for="email"><em>*</em>Friend Email</label>
                    <div class="input-box">
                        <input type="text" class="input-text required-entry validate-email" value="" title="Email" id="friend-email" name="email">
                    </div>
                </div>
            </li>
            <li class="wide">
                <div class="input-box">
                    <textarea rows="3" cols="5" class="required-entry input-text" title="Comment" id="coment-cart" name="comment">
			
					</textarea>
                </div>
            </li>
        </ul>
		
		<div class="buttons-set" style=" margin: 0; padding: 0;">
        <p class="required">* Required Fields</p>
        <button class="button" id="email-cart" title="Sent To Friend" type="submit" onclick="sendEmail()"><span><span>Send</span></span></button>
    </div>

JavaScript

function sendEmail() {
	    var nn = jQuery("#your-name").val().length;
	    var ee = jQuery("#friend-email").val().length;

	    if (nn == 0 && ee == 0) {

	        jQuery("input#your-name").css("border", "1px red solid");
	        jQuery("input#friend-email").css("border", "1px red solid");

	    } else if (ee == 0) {

	        jQuery("input#friend-email").css("border", "1px red solid");

	    } else if (nn == 0) {

	        jQuery("input#friend-name").css("border", "1px red solid");

	    } else {

	        ajax();
	    }
	}