<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/tachyons@4.10.0/css/tachyons.min.css" />
<link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Email address</div>
<div class="fl w-40">
<input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="email" />
</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 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 src="/vendors/formvalidation/dist/js/plugins/Mailgun.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
FormValidation.formValidation(document.getElementById('demoForm'), {
fields: {
email: {
validators: {
notEmpty: {
message: 'The email address is required',
},
emailAddress: {
message: 'The input is not a valid email address',
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
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',
}),
mailgun: new FormValidation.plugins.Mailgun({
apiKey: '...',
field: 'email',
message: 'The email address is not valid',
suggestion: true,
}),
},
});
});
</script>
</body>
</html>