reformer-username
A plugin for reformer to handle the super annoying problem of username validation testing while filling out a form.
The problems:
- You want to run a debounced check as a user is typing into the field.
- You want to validate that with some server-side check. But, you also have to account for the fact that results may come back out of order. So we only care about results for requests that checked the current data.
- You want a hard enforcement check before submitting the form.
- You want to support existing data in the form and not check if it's just the same value as when you started.
- If it violates simple formatting rules you don't want to do the server-side check at all.
- You want to be able to customize a message saying that the username they picked is, or isn't available.
- You want to be able to show that container whenever something relevant is happening, but not if there's nothing wrong.
- You want to be able to show a spinner or some type of loading graphic when the server checks are happening.
Installing
You can grab it on npm and use it with browserify:
npm i reformer-username
Or just grab the file from dist/reformer.usernamefield.js
which will work with AMD or as a standalone.
How to use
var profileForm = // pass existing data to form if it exists data: existingData fields: // our plugin returns a normal field definition // but with all our extra magic. // Any options you pass to the plugin that the // plugin doesn't use, simply gets passed onto // the field definition like reformer does normally. // So you can pass any valid field options in here too // such as the `fieldContainer` in this example or // a `setup` function, etc. // you just continue defining normal fields as follows name: 'firstName' label: 'First name' placeholder: 'Helpy' fieldContainer: 0 tests: message: 'Must be less than 20 characters.' { return vallength <= 20; } message: 'Please enter your first name.' { return !!vallength; } { // our normal submit handler } { // normal global error handler }; // render our formprofileForm;
misc
If you like this, follow @HenrikJoreteg :)
license
MIT