JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form action="">
	<fieldset>		
		<input name="name" id="name_field" type="text" placeholder="username" />
		<input name="email" id="email_field" type="text" placeholder="email" />
		<input name="phone" id="phone_field" type="text" placeholder="phone" />
		<textarea id="message" placeholder="message"></textarea>
		<input type="submit" value="submit" />
		<div class="error-msg"></div>
	</fieldset>
</form>

CSS

input, textarea {padding: 5px; border: 1px solid #000;}
.error {border-color: red;}
.error-msg {color: red;}
	.error-msg label {display: block;}

JavaScript

var phone_mask = '+7 (999) 999 - 99 - 99';
$('#phone_field').mask(phone_mask, {placeholder: '_'});

var validator = $('form').validate({
	rules: {
		name: {required: true},
		email: {required: function(element){return $("#phone_field").val() == ''}, email: true},
		phone: {requiredPhone: function(element){return $("#email_field").val() == ''}, minlengthPhone: 11}
	},
	messages: {
		name: {required: 'Enter a name'},
		email: {required: 'Enter an email address or a phone number', email: 'Enter a valid email address'}
	},
	errorPlacement: function(error, element) {
		error.appendTo(element.closest('fieldset').find('div.error-msg'));
	},
	submitHandler: function() {
		alert('submitted'); $('input:text').val('');
	}
});

$.validator.addMethod('requiredPhone', function(value) {return value.replace('+7 (___) ___ - __ - __').length;}, 'Enter a phone number or an email address');
$.validator.addMethod('minlengthPhone', function(value, element, param) {return value.replace(/\D+/g, '').length == param}, 'Enter a valid phone number');