31:Tb0f,formView = html`

Info about you

First Name

Last Name

Employed?

Your Preferences

Favorite Color

Favorite Fruit:

Strawberries

Raspberris

Apple

Bananas

Blackberries

Kiwi

None

Choose Two Letters:

Personalized message:

`32:T1087,function formValidator(formView, { initialValues = {}, onSubmit = () => {}, onUpdate = () => {}, validate, updateParams = { // The list of values you want to be updated about dirty: true, valid: true, values: true }, updateResetView = (formView, element, info) => { element.disabled = !info.dirty; }, updateSubmitView = (formView, element, info) => { element.disabled = !info.valid; }, updateErrorViews = (formView, errors) => { [...formView.querySelectorAll(`[data--form-error]`)].forEach(errorElement => { errorElement.innerHTML = ''; errorElement.classList.remove('error'); errorElement.style.display = 'none' }) for (let [name, error] of Object.entries(errors)) { const errorElement = formView.querySelector(`[data--form-error="${name}"]`) if (!error || !errorElement) continue; errorElement.innerHTML = typeof error === 'object' ? error.message : error; errorElement.classList.add('error'); errorElement.style.display = '' } }, submitSelector = '[type="submit"]', resetSelector = '[type="button"]' } = {}) { const form = createForm({ onSubmit, initialValues, validate }); function addEventListener(input, event, handler) { input.addEventListener(event, handler); return () => input.removeEventListener(event, handler); } const addButtonListener = (element, event, handler) => { return { element, unregister : addEventListener(element, event, handler) } } const handleSubmit = event => { event.preventDefault(); form.submit(); }; const submitRegistratoins = [...formView.querySelectorAll(submitSelector)] .map(button => addButtonListener(button, 'click', handleSubmit)); const handleReset = (event) => { event.preventDefault(); form.reset(); } const resetRegistratoins = [...formView.querySelectorAll(resetSelector)] .map(button => addButtonListener(button, 'click', handleReset)); const fieldsRegistrations = new Map(); function registerField(input) { const { name } = input; if (!name) return ; form.registerField( name, fieldState => { const { blur, change, error, focus, touched, value } = fieldState; if (!fieldsRegistrations.has(input)) { let onInput; if (input.type === 'radio') { onInput = (event) => event.target.checked && change(event.target.value); } else if (input.type === 'checkbox') { onInput = (event) => change(event.target.checked ? true : undefined); } else { onInput = (event) => change(event.target.value) } const regs = [ addEventListener(input, 'blur', () => blur()), addEventListener(input, 'input', onInput), addEventListener(input, 'focus', () => focus()) ]; fieldsRegistrations.set(input, { element : input, unregister : () => regs.forEach(r => r()) }) } // update value if (input.type === 'checkbox') { input.checked = value; } else if (input.type === 'radio') { input.checked = value === input.value; } else { input.value = value === undefined ? '' : value } }, { value: true, error: true, touched: true } ) } [...formView].forEach(registerField); // Subscribe to form state updates let prevDirty, prevValid, prevErrors = {}; const updateHandler = (info) => { if (prevDirty !== info.dirty || prevValid !== info.valid) { submitRegistratoins.forEach(({ element }) => updateSubmitView(formView, element, info)); resetRegistratoins.forEach(({ element }) => updateResetView(formView, element, info)); prevDirty = info.dirty; prevValid = info.valid; } const { errors = {} } = form.getState(); updateErrorViews(formView, errors); onUpdate(info); } const unsubscribe = form.subscribe(updateHandler, updateParams); return () => { unsubscribe(); submitRegistratoins.forEach(r => r.unregister()); resetRegistratoins.forEach(r => r.unregister()); for (const r of fieldsRegistrations.values()) { r.unregister(); } } }33:[] 2f:{"title":"Form Validations with FinalForms","cells":[{"id":0,"value":"md`# Form Validations with FinalForms\n\nThis notebook provides the formValidator method allowing to validate forms and notify errors. This implementation is based on the Final Form: https://final-form.org/.\n\n\\`\\`\\`javascript\nimport { formValidator } from '@kotelnikov/form-validations-with-finalforms';\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"formData.values","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"initialValues = ({\n // color: '#0000FF'\n fruit : 'none',\n firstName : 'John',\n lastName : 'Smith',\n message : 'Hello, there!',\n color: '#FF0000',\n employed : true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"function validate(values) {\n const errors = {}\n if (!values.firstName) {\n errors.firstName = 'Required'\n }\n if (!values.lastName) {\n errors.lastName = 'Required'\n }\n if (values.color === '#00FF00') {\n errors.color = 'Gross! Not green! 🤮'\n }\n if (!(values.message || '').trim()) {\n errors.message = 'Message should not be empty!';\n }\n if (!values.fruit || values.fruit === 'none') {\n errors.fruit = 'You should eat fruits!';\n }\n if (!values.letters || (Object.keys(values.letters).length !== 2)) {\n errors.letters = { message : 'You have to choose two letters.' };\n }\n if (Object.keys(errors).length) {\n errors.formError = 'Form is not valid!';\n }\n return errors;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"// This method visualizes error.\n// Additionally to a default error visualization method\n// it activates a red border around invalid forms.\nfunction updateErrorViews(formView, errors) {\n [...formView.querySelectorAll(`[data--form-error]`)].forEach(errorElement => {\n errorElement.innerHTML = '';\n errorElement.classList.remove('error');\n errorElement.style.display = 'none'\n })\n\n for (let [name, error] of Object.entries(errors)) {\n const errorElement = formView.querySelector(`[data--form-error=\"${name}\"]`)\n if (!error || !errorElement) continue;\n errorElement.innerHTML = typeof error === 'object' ? error.message : error;\n errorElement.classList.add('error');\n errorElement.style.display = ''\n }\n \n formView.style.border = errors.formError ? '1px solid red' : '1px solid transparent';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`The cell below creates a generator returning form values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"formData = Generators.observe(notify => {\n let lastInfo = {};\n return formValidator(formView, {\n initialValues,\n validate,\n updateErrorViews,\n onSubmit() {\n lastInfo.submit = true;\n notify(lastInfo);\n },\n onUpdate(info) {\n lastInfo = info;\n lastInfo.submit = false;\n notify(lastInfo);\n }\n });\n});\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"createForm = {\n const { createForm } = await import('final-form');\n return createForm;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}

Test Form

Info about you

Your Preferences

Personalized message: