Lightweight async submit and constraint validation form wrapper.
npm install storm-form
Lightweight async submit and constraint validation form wrapper.
CSSExample notification CSS
@keyframes slideUp {
0% {
transform: translateY(100%)
}
100% {
transform: translateY(0)
}
}
.form-status {
position: fixed;
bottom:0;
left:0;
right:0;
padding:24px 48px;
text-align:center;
animation:slideUp 260ms ease;
}
.form-status--invalid {
background-color:#C70933;
color:#fff;
}
.form-status--error {
background-color:#C70933;
color:#fff;
}
.form-status--success {
background-color:green;
color:#fff;
}
.form-status--submit {
background-color:blue;
color:#fff;
}
JS
npm i -S storm-form
either using es6 import
import Form from 'storm-form';Form.init('.js-Form');
asynchronous browser loading (use the .standalone version in the /dist folder) using the global name (Storm + capitalised package name)
import Load from 'storm-load';Load('{{path}}/storm-form.standalone.js')
.then(() => {
StormForm.init('.js-form');
});
Options
{
messages: {
invalid: 'Ensure the form is valid before submission', //form is invalid
success: 'The form has been successfuly submitted', //form submitted
error: 'There was an error submitting the form', //server cannot send
submit: 'Submitting...'//form submitted, waiting for server
},
notificationTarget: document.body,
async: true,
callback: false
}
Tests
npm run test
The es5 version depends upon HTML5 Form Constraint Validation API, Object.assign, element.classList, and Promises so all evergreen browsers are supported out of the box, ie9+ is supported with polyfills. ie8+ will work with even more polyfills for Array functions and eventListeners.