JSFiddle - React, Tailwind, and code Playground
by helgatheviking
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<html>
<head>
<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/[email protected]/css/tachyons.min.css">
<link rel="stylesheet" href="https://formvalidation.io/vendors/formvalidation/css/formValidation.min.css">
</head>
<body>
<form id="demoForm" method="post">
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-50 pa2">Your age (18+ required)</div>
<div class="fl w-25">
<input type="text" name="age" 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-50 pa2"></div>
<div class="fl w-50">
<button type="submit" class="ba b--black-20 bg-blue white ph3 pv2 br2">Submit</button>
</div>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendors/formvalidation/dist/js/plugins/Tachyons.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
age: {
validators: {
greaterThan: {
message: 'The value must be greater than or equal to 18',
min: 18,
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
tachyons: new...