Date range validation

Explanation of the problem

The problem is related to the JavaScript library yup, which is used for schema validation. The user has written two tests to validate a number range and a date range, but the second test fails with a “RangeError: Maximum call stack size exceeded” error message. The first test works as expected, and the user is unsure how to modify their code to properly validate a date range.

In the code provided, the user defines a yup object schema that validates a date range, with a required “start” field and an optional “end” field. The “end” field is only validated if the “start” field is present, and must be greater than or equal to the “start” field. However, when the user attempts to validate a date range in the second test, the validation fails with a RangeError.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Date range validation

One potential solution to this issue could be to modify the yup schema to include a custom validation function that checks the validity of the date range. This function could be defined using the yup.mixed().test() method and would take in the entire object schema as its input. The function could then validate the “start” and “end” fields using a custom logic that ensures the “end” date is not earlier than the “start” date. Below is an example implementation of this custom validation function:

const validateDateRange = (obj) => {
  const { start, end } = obj;
  if (!start || !end) {
    return true; // don't validate if either field is missing
  }
  return moment(end).isSameOrAfter(start); // custom validation logic
};

const schema = yup.object({
  start: yup.date().required(),
  end: yup.date().test('date-range', 'End date must be after start date', validateDateRange),
});

With this custom validation function included in the schema definition, the user should be able to validate a date range without encountering the “RangeError: Maximum call stack size exceeded” issue.

Other popular problems with yup

const schema = yup.object({
  start: yup.date().required(),
  end: yup.date().when('start', (start, schema) => {
    return schema.test({
      test: end => end >= start,
      message: 'End date must be greater than or equal to start date',
    });
  }),
});

schema.validate({
  start: new Date('2022-01-01'),
  end: new Date('2021-12-31'),
})
.catch((e) => {
  console.error(e);
});

const schema = yup.object({
  name: yup.string().required(),
  age: yup.number().required(),
  address: yup.object().shape({
    street: yup.string().required(),
    city: yup.string().required(),
    zip: yup.string().matches(/^[0-9]{5}(?:-[0-9]{4})?$/).required(),
  }),
});

schema.validate({
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zip: '12345',
  },
})
.catch((e) => {
  console.error(e);
});

const schema = yup.array().of(
  yup.object().shape({
    name: yup.string().required(),
    age: yup.number().required(),
    startDate: yup.date().required(),
    endDate: yup.date().required(),
  })
  .test({
    name: 'date-range',
    message: 'End date must be after start date',
    test: function (value) {
      const { startDate, endDate } = value;
      return startDate <= endDate;
    },
  }),
);

schema.validate([
  {
    name: 'John',
    age: 30,
    startDate: new Date('2022-01-01'),
    endDate: new Date('2021-12-31'),
  },
])
.catch((e) => {
  console.error(e);
});

A brief introduction to yup

Most popular use cases for yup

1. yup can be used for schema validation in JavaScript applications. It allows defining validation rules for objects, arrays, and nested structures. Here’s an example of a basic schema validation using yup:

import * as yup from 'yup';

const schema = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required(),
  age: yup.number().positive().integer().required(),
});

const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  age: 25,
};

schema.validate(data)
  .then(() => console.log('Valid'))
  .catch(err => console.log(err));

This code defines a schema that expects an object with properties name, email, and age, and validates that name is a required string, email is a required email string, and age is a required positive integer.

2. yup can be used for form validation in React applications. It integrates well with form libraries such as Formik and Redux Form. Here’s an example of form validation using Formik and yup:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as yup from 'yup';

const schema = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required(),
  age: yup.number().positive().integer().required(),
});

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '', age: '' }}
      validationSchema={schema}
      onSubmit={(values, actions) => {
        console.log(values);
        actions.setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label htmlFor="name">Name</label>
            <Field type="text" name="name" />
            <ErrorMessage name="name" />
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field type="email" name="email" />
            <ErrorMessage name="email" />
          </div>
          <div>
            <label htmlFor="age">Age</label>
            <Field type="text" name="age" />
            <ErrorMessage name="age" />
          </div>
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

This code defines a form with three fields name, email, and age, and uses Formik to manage form state and submit handling. yup is used to define the validation schema and validate the form values.

3. yup can be used for data transformation and coercion. It allows defining custom transforms and coercions for data types. Here’s an example of data transformation using yup:

import * as yup from 'yup';

const schema = yup.object().shape({
  price: yup.string().transform((value, originalValue) => {
    if (typeof originalValue === 'string') {
      return parseFloat(originalValue.replace(',', '.'));
    }
    return value;
  }),
});

const data = {
  price: '1,23',
};

schema.cast(data); // { price: 1.23 }

This code defines a schema that expects an object with a price property, and defines a custom transform for price that replaces commas with dots and converts the result to a float. The cast method is then used to apply the transform to the data object.