JSFiddle - React, Tailwind, and code Playground

JavaScript

$(document).ready(function(){
// ====================================================== //

var jVal = {
	'fullName' : function() {
		$('#fullname_valid').parent().append('<div id="nameInfo" class="info_valid"></div>');
		var nameInfo = $('#nameInfo');
		var ele = $('#fullname_valid');
		var pos = ele.offset();
		if(ele.val().length < 10) {
			jVal.errors = true;
				nameInfo.removeClass('correct').addClass('error_valid').html('<i class="fa fa-exclamation-circle"></i><div class="reason_valid">Имя должно быть больше<br/><b>2</b> символов</div>').show();
		// hover коментария к input//		
		$(".error_valid").hover(function () { 
		  if ($(this).children('.reason_valid').css('display') == 'none') 
			{ 
				$(this).children('.reason_valid').css('display','block').animate({opacity:1},'fast');
			} 
		else 
			{     
				$(this).children('.reason_valid').css('display','none').animate({opacity:0},'slow'); 
			} 
		});
  		//  end hover коментария к input  //
				ele.removeClass('normal').addClass('wrong');				
		} else {
				nameInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
		}
	},

	'sendIt' : function (){
		if(!jVal.errors) {
			$('form').submit();
		}
	}
};

// ====================================================== //

$('#send').click(function (){
	var obj = $.browser.webkit ? $('body') : $('html');
	obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
		jVal.errors = false;
		jVal.fullName();
	});
	return false;
});

$('#fullname_valid').change(jVal.fullName);

// ====================================================== //
});