JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="post">
  <section class="col">

    <section class="row">
      <label for="name">Name</label>
      <input type="text" name="name" value="" id="name" class="field validate-field valid-name" />
    </section>

    <section class="row">
      <label for="email">Email Address</label>
      <input type="text" name="email" value="" id="email" class="field validate-field valid-mail" />
    </section>

    <section class="row">
      <label for="phone">Phone Number</label>
      <input type="text" name="phone" value="" id="phone" class="field validate-field valid-phone" />
    </section>
  </section>

  <section class="col">
    <label for="message">Message</label>
    <textarea class="field validate-field valid-text" name="message" id="message-field"></textarea>
    <button id="validate">Validate</button>
  </section>
</form>

JavaScript

function validateAll() {
  var valid = true;
  $('form').find('.validate-field').each(function(i, e) {
    if (!validate($(this))) {
      valid = false;
      return;
    }
  });
  return valid;
}

function validate(field) {
  var value = field.val();
  var to_label = field.parent().find('label');
  var error = false;
  var error_message = '';

  to_label.find('span').remove();

  if (field.hasClass('validate-field') && value == '') {
    error = true;
    error_message = 'Empty Field';
  } else if (field.hasClass('valid-name') && valid_name(value) == false) {
    error = true;
    error_message = 'Name must consist characters only';
  } else if (field.hasClass('valid-mail') && valid_email(value) == false) {
    error = true;
    error_message = 'Invalid Email';
  } else if (field.hasClass('valid-phone') && valid_phone(value) == false) {
    error = true;
    error_message = 'Your phone must be digits only';
  };

  if (error) {
    to_label.append('<span>' + error_message + '</span>');
  }

  return !error;

};


$('.validate-field').live('keyup', function() {
  validate($(this));
});

function valid_name(value) {
  var valid = /^([a-zA-Z_\.\-\+])+$/;
  return valid.test(value);
};

function valid_email(value) {
  var valid = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return valid.test(value);
};

function valid_phone(value) {
  var valid = /^[0-9-+]+$/;
  return valid.test(value);
};

$('#validate').click(function() {
  if (validateAll()) {
    alert("Valid");
  } else {
    alert("Not valid");
  }
});