JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" />
<link rel="stylesheet" href="https://formvalidation.io/vendors/formvalidation/dist/css/formValidation.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="https://formvalidation.io/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="https://formvalidation.io/vendors/formvalidation/dist/js/plugins/Tachyons.min.js"></script>


<form id="demoForm" method="POST">
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">Full name</div>
      <div class="fl w-50">
        <input type="text" name="firstName" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
      </div>
    </div>
  </div>
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">Username</div>
      <div class="fl w-50">
        <input type="text" name="username" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
      </div>
    </div>
  </div>
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2"></div>
      <div class="fl w-50">
        <button type="submit" class="ba b--black-20 ph3 pv2 br2" disabled>sign up</button>
      </div>
    </div>
  </div>
</form>

CSS

body {
  padding: 2rem;
}

JavaScript

document.addEventListener('DOMContentLoaded', function(e) {
  const demoForm = document.getElementById('demoForm');
  const submitButton = demoForm.querySelector('[type="submit"]');
  const validationStatus = {
  	firstName: false, username: false
  };
  const checkButtonState = () => {
  const isValidForm = Object.keys(validationStatus).every(key => validationStatus[key] === true);
  
  	if (isValidForm) {
    	submitButton.removeAttribute('disabled');
    } else {
      submitButton.setAttribute('disabled', 'disabled');
    }
  };

  const fv = FormValidation.formValidation(demoForm, {
    fields: {
      firstName: {
        validators: {
          notEmpty: {
            message: 'The first name is required',
          },
        },
      },
      username: {
        validators: {
          notEmpty: {
            message: 'The username is required',
          },
          stringLength: {
            min: 6,
            max: 30,
            message: 'The username must be more than 6 and less than 30 characters long',
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: 'The username can only consist of alphabetical, number and underscore',
          },
        },
      },
    },
    plugins: {
      tachyons: new FormValidation.plugins.Tachyons(),
       submitButton: new FormValidation.plugins.SubmitButton(),
      	icon: new FormValidation.plugins.Icon({
        valid: 'fa fa-check',
        invalid: 'fa fa-times',
        validating: 'fa fa-refresh',
      }),
      trigger: new FormValidation.plugins.Trigger(),
    },
  });
  
  fv.on('core.field.valid', function(field) {
  	validationStatus[field] = true;
    checkButtonState();
  });
  
  
  fv.on('core.field.invalid', function(field) {
  	validationStatus[field] = false;
    checkButtonState();
  });
});