Skip to content

Instantly share code, notes, and snippets.

@milantarami

milantarami/yup-with-final-form.js

Forked from manzoorwanijk/yup-with-final-form.js
Last active November 3, 2022 09:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save milantarami/dd13e1cf5b7e91e01c641514ff9806ef to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save milantarami/dd13e1cf5b7e91e01c641514ff9806ef to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. milantarami revised this gist Nov 3, 2022. 1 changed file with 27 additions and 1 deletion.
    28 changes: 27 additions & 1 deletion yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,4 +49,30 @@ const MyForm = () => (
    onSubmit={onSubmit}
    validate={validate}
    />
    );
    );



    // without any library

    import { ValidationError } from 'yup';

    type ErrorObject = {
    [field: string]: string[];
    };
    /**
    * Convert yup error into an error object where the keys are the fields and the values are the errors for that field
    * @param {ValidationError} err The yup error to convert
    * @returns {ErrorObject} The error object
    */
    export function yupErrorToErrorObject(err: ValidationError): ErrorObject {
    const object: ErrorObject = {};

    err.inner.forEach((x) => {
    if (x.path !== undefined) {
    object[x.path] = x.errors;
    }
    });

    return object;
    }
  2. @manzoorwanijk manzoorwanijk revised this gist Jul 1, 2020. 1 changed file with 35 additions and 55 deletions.
    90 changes: 35 additions & 55 deletions yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,72 +1,52 @@
    /**
    * If your data contains FieldArray or has nested values, like this
    * {
    * email: 'email@domain.com',
    * shpping: {
    * name: 'XYZ',
    * phone: {
    * code: '+44',
    * number: 12345678,
    * },
    * address: 'Baker Street',
    * zip: 'ABCDEF',
    * },
    * billing: {
    * name: 'ABC',
    * address: 'Some Address',
    * zip: 'xyz1234',
    * },
    * items: [
    * {
    * id: 1234,
    * price: 57.9,
    * quantity: 2,
    * },
    * {
    * id: 5678,
    * price: 158.2,
    * quantity: 1,
    * }
    * ],
    * }
    * Here is how to properly make use of yup.
    */

    import * as yup from 'yup';
    import { setIn } from 'final-form';

    const validationSchema = yup.object( {
    const validationSchema = yup.object({
    email: yup.string().email(),
    shpping: yup.object( {
    shipping: yup.object({
    name: yup.string(),
    phone: yup.object( {
    code: yup.string().matches( /^\+\d+$/i ),
    phone: yup.object({
    code: yup.string().matches(/^\+\d+$/i),
    number: yup.number().max(10),
    } ),
    }),
    address: yup.string(),
    zip: yup.string(),
    } ),
    billing: yup.object( {
    }),
    billing: yup.object({
    name: yup.string(),
    address: yup.string(),
    zip: yup.string(),
    } ),
    items: yup.array().of( yup.object( {
    id: yup.number(),
    price: yup.number(),
    quantity: yup.number(),
    } ) ),
    } );
    }),
    items: yup.array().of(
    yup.object({
    id: yup.number(),
    price: yup.number(),
    quantity: yup.number(),
    })
    ),
    });

    // To be passed to React Final Form
    const validate = async ( values ) => {
    const validateFormValues = (schema) => async (values) => {
    if (typeof schema === 'function') {
    schema = schema();
    }
    try {
    await validationSchema.validate( values, { abortEarly: false } );
    } catch ( err ) {
    const errors = err.inner.reduce( ( formError, innerError ) => {
    return setIn( formError, innerError.path, innerError.message );
    }, {} );
    await schema.validate(values, { abortEarly: false });
    } catch (err) {
    const errors = err.inner.reduce((formError, innerError) => {
    return setIn(formError, innerError.path, innerError.message);
    }, {});

    return errors;
    }
    };
    };

    const validate = validateFormValues(validationSchema);

    const MyForm = () => (
    <Form // from react-final-form
    onSubmit={onSubmit}
    validate={validate}
    />
    );
  3. @manzoorwanijk manzoorwanijk revised this gist Aug 4, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,6 +34,7 @@

    import * as yup from 'yup';
    import { setIn } from 'final-form';

    const validationSchema = yup.object( {
    email: yup.string().email(),
    shpping: yup.object( {
  4. @manzoorwanijk manzoorwanijk revised this gist Aug 4, 2019. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -63,7 +63,6 @@ const validate = async ( values ) => {
    await validationSchema.validate( values, { abortEarly: false } );
    } catch ( err ) {
    const errors = err.inner.reduce( ( formError, innerError ) => {

    return setIn( formError, innerError.path, innerError.message );
    }, {} );

  5. @manzoorwanijk manzoorwanijk revised this gist Aug 4, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    /**
    * If your data contains FieldArray or has nested values, like this
    * {
    * email: 'email@domain.com',
    * shpping: {
  6. @manzoorwanijk manzoorwanijk revised this gist Aug 4, 2019. 1 changed file with 28 additions and 28 deletions.
    56 changes: 28 additions & 28 deletions yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,36 +1,36 @@
    /**
    * If your data contains FieldArray or has nested values, like this
    * {
    * email: 'email@domain.com',
    * shpping: {
    * name: 'XYZ',
    * phone: {
    * code: '+44',
    * number: 12345678,
    * },
    * address: 'Baker Street',
    * zip: 'ABCDEF',
    * },
    * billing: {
    * name: 'ABC',
    * address: 'Some Address',
    * zip: 'xyz1234',
    * },
    * items: [
    * {
    * id: 1234,
    * price: 57.9,
    * quantity: 2,
    * },
    * {
    * id: 5678,
    * price: 158.2,
    * quantity: 1,
    * }
    * ],
    * email: 'email@domain.com',
    * shpping: {
    * name: 'XYZ',
    * phone: {
    * code: '+44',
    * number: 12345678,
    * },
    * address: 'Baker Street',
    * zip: 'ABCDEF',
    * },
    * billing: {
    * name: 'ABC',
    * address: 'Some Address',
    * zip: 'xyz1234',
    * },
    * items: [
    * {
    * id: 1234,
    * price: 57.9,
    * quantity: 2,
    * },
    * {
    * id: 5678,
    * price: 158.2,
    * quantity: 1,
    * }
    * ],
    * }
    * Here is how to properly make use of yup.
    */

    import * as yup from 'yup';
    import { setIn } from 'final-form';
    const validationSchema = yup.object( {
  7. @manzoorwanijk manzoorwanijk created this gist Aug 4, 2019.
    71 changes: 71 additions & 0 deletions yup-with-final-form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    /**
    * If your data contains FieldArray or has nested values, like this
    * {
    * email: 'email@domain.com',
    * shpping: {
    * name: 'XYZ',
    * phone: {
    * code: '+44',
    * number: 12345678,
    * },
    * address: 'Baker Street',
    * zip: 'ABCDEF',
    * },
    * billing: {
    * name: 'ABC',
    * address: 'Some Address',
    * zip: 'xyz1234',
    * },
    * items: [
    * {
    * id: 1234,
    * price: 57.9,
    * quantity: 2,
    * },
    * {
    * id: 5678,
    * price: 158.2,
    * quantity: 1,
    * }
    * ],
    * }
    * Here is how to properly make use of yup.
    */
    import * as yup from 'yup';
    import { setIn } from 'final-form';
    const validationSchema = yup.object( {
    email: yup.string().email(),
    shpping: yup.object( {
    name: yup.string(),
    phone: yup.object( {
    code: yup.string().matches( /^\+\d+$/i ),
    number: yup.number().max(10),
    } ),
    address: yup.string(),
    zip: yup.string(),
    } ),
    billing: yup.object( {
    name: yup.string(),
    address: yup.string(),
    zip: yup.string(),
    } ),
    items: yup.array().of( yup.object( {
    id: yup.number(),
    price: yup.number(),
    quantity: yup.number(),
    } ) ),
    } );

    // To be passed to React Final Form
    const validate = async ( values ) => {
    try {
    await validationSchema.validate( values, { abortEarly: false } );
    } catch ( err ) {
    const errors = err.inner.reduce( ( formError, innerError ) => {

    return setIn( formError, innerError.path, innerError.message );
    }, {} );

    return errors;
    }
    };