JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="formsID" name="formsName">
   <input type="text" name="name001" title="Not required" />
   <input type="text" name="name002" required="required" title="Required" />
   <input type="text" name="name003" required="required" pattern="^[02468]+$" title="Required & Pattern" />
   <input type="text" name="name004" required="required" class="vf-dateDMY" title="Required & classPattern" />
   <input type="text" name="name005" pattern="^[а-яёА-Я]+$" title="Not required & Pattern" />
   <input type="text" name="name006" pattern="^[а-яёА-Я]+$" class="vf-dataDMYus" title="Not required & Pattern & classPattern" />
   <textarea name="name007" cols="14" rows="1" required="required" title="Required"></textarea>
            
    <input type="submit" name="name008" value="Submit" />
    <span class="vf-submit">Send In</span>
</form>
        
<span class="vf-submit formsID">Send Out</span>

CSS

body {
    background: url(http://subtlepatterns.com/patterns/grid.png);
    font: 14px serif;
    color: #444 }

form {
    display: inline-block;
    position: relative;
    border: 1px solid mediumaquamarine }

form input, textarea {
    display: block;
    margin: 7px;
    background-color: rgb(255, 255, 200) }

input[type="submit"] {
    margin-top: 10px;
    background-color: transparent }

.vf-submit:hover {
    text-shadow: 0 1px 0 #666 }

.vf-submit {
    position: relative;
    top: 0;
    left: 10px;
    cursor: pointer }

JavaScript

var jVForms = (function() {
    
    'use strict';
    
    var CLASS_SUBMIT = 'vf-submit',
        CLASS_VALID = 'vf-valid',
        CLASS_INVALID = 'vf-invalid',
        
        config = {
            
           pattern: {
               
               all: '[\\S]+',
               numInt: '^\\d+$',
               numFloat: '^\\d+(\\.|,)\\d+$',
               notNum: '^\\D+$',
               index: '^\\d{6}$',
               wordUpper: '^[A-ZА-ЯЁ-]+$',
               wordLower: '^[a-zа-яё-]+$',
               wordRuUpper: '^[А-ЯЁ-]+$',
               wordRuLower: '^[а-яё-]+$',
               wordUSUpper: '^[A-Z-]+$',
               wordUSLower: '^[a-z-]+$',        
               
               stringRu: '^[^a-zA-Z]+$',        
               stringUS: '^[^а-яА-ЯёЁ]+$',      
               
               timeHM: '^[012][\\d]:[012345][\\d]$',        
               dateDMY: '^[0123][\\d]/[01][\\d]/[\\d]{4}$', 
               dataDMYus: '[01][\\d]/[0123][\\d]/[\\d]{4}', 
               
               cc: '^[\\d]{4}\\s[\\d]{4}\\s[\\d]{4}\\s[\\d]{4}$', 
               
               phone: '^[\\d]{3}(\\s|-)?[\\d]{2}(\\s|-)?[\\d]{2}$',     
               phoneDash: '^\\([\\d]{3}\\)\\s[\\d]{3}(\\s|-)[\\d]{4}$', 
               phoneAlong: '^\\([\\d]{3}\\)\\s[\\d]{7}$',               
               
               test: '^test$'
           },
           
           
           notice: 'All'
           
        }
        
        ;
    
    function initialize( options ) {
        
        extend( config, options );
        
        setup();
        
    }
    
    function setup() {
        
        if ( !config.notice && typeof config.notice !== 'String' ) {
            return ;
        }
        
        var val = config.notice.toLowerCase();
        
        val === 'error' && (config.mode = 2) ||
        val === 'all'   && (config.mode = 1) ||
        val === 'off'   && (config.mode = 0);
    
        if ( typeof config.mode === 'undefined' ) { return ;...