UMD Setup
Importmobx andmobx-react-form into your html:
- Downloadlatest version of lodash
- Downloadlatest version of mobx
- Downloadlatest version of mobx-react-form
- Download aValidation Plugin
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="x-ua-compatible"content="ie=edge"><title>MobX React Form (UMD)</title><metaname="viewport"content="width=device-width, initial-scale=1"></head><body><scriptsrc="https://unpkg.com/lodash@x.x.x/lodash.min.js"></script><scriptsrc="https://unpkg.com/mobx@x.x.x/lib/mobx.umd.js"></script><scriptsrc="https://unpkg.com/mobx-react-form@x.x.x/umd/MobxReactForm.umd.min.js"></script><scriptsrc="https://unpkg.com/mobx-react-form@x.x.x/umd/MobxReactFormValidatorDVR.umd.min.js"></script><scriptsrc="https://unpkg.com/validatorjs@x.x.x/dist/validator.js"></script><scriptsrc="source.js"></script></body></html>Access theMobxReactForm from your source:
source.js
/* eslint no-console: 0 *//* eslint no-undef: 0 */console.log('lodash', _&&'>>> OK');console.log('mobx', mobx&&'>>> OK');console.log('MobxReactForm', MobxReactForm&&'>>> OK');console.log('MobxReactFormValidatorDVR', MobxReactFormValidatorDVR&&'>>> OK');console.log('Validator', Validator&&'>>> OK');const{ Form}= MobxReactForm;const form=newForm({ fields:{ email:{ label:'Email', rules:'required|email',},},},{ name:'UMD', options:{ validateOnInit:true, showErrorsOnInit:true,}, plugins:{ dvr:MobxReactFormValidatorDVR({package: Validator})},});console.log('form.values()', form.values());// { email: "" }console.log('form.errors()', form.errors());// { email: "The Email format is invalid." }