JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<input type="text" placeholder="Name:" class="form-control" id="name">
    
<input type="text" placeholder="Email:" class="form-control" id="email">

    <input type="text" placeholder="Phone:" class="form-control" id="f3">
        
        
        <pre>
 	var f3 = new LiveValidation('f3');
	f3.add( Validate.Numericality );
        </pre>

CSS

.LV_validation_message {
    display: none;
}
.LV_valid_field {
    box-shadow: 0 0 4px #0c0;
}
.LV_invalid_field {
    box-shadow: 0 0 8px #f00;
}

input{ min-height:50px; }

JavaScript

//MAKE JS FILE FOR blow script
// LiveValidation 1.3 (standalone version)
// Copyright (c) 2007-2008 Alec Hill (www.livevalidation.com)
// LiveValidation is licensed under the terms of the MIT License
var LiveValidation=function(B,A){this.initialize(B,A);};LiveValidation.VERSION="1.3 standalone";LiveValidation.TEXTAREA=1;LiveValidation.TEXT=2;LiveValidation.PASSWORD=3;LiveValidation.CHECKBOX=4;LiveValidation.SELECT=5;LiveValidation.FILE=6;LiveValidation.massValidate=function(C){var D=true;for(var B=0,A=C.length;B<A;++B){var E=C[B].validate();if(D){D=E;}}return D;};LiveValidation.prototype={validClass:"LV_valid",invalidClass:"LV_invalid",messageClass:"LV_validation_message",validFieldClass:"LV_valid_field",invalidFieldClass:"LV_invalid_field",initialize:function(D,C){var A=this;if(!D){throw new Error("LiveValidation::initialize - No element reference or element id has been provided!");}this.element=D.nodeName?D:document.getElementById(D);if(!this.element){throw new Error("LiveValidation::initialize - No element with reference or id of '"+D+"' exists!");}this.validations=[];this.elementType=this.getElementType();this.form=this.element.form;var B=C||{};this.validMessage=B.validMessage||"Thankyou!";var...