Question:

Implementing mutual dependency and validation in a form

Summary:

Introducing a common challenge in form validation: ensuring mutual dependency between two input fields. In this scenario, both fields must be filled out with numbers within a specific range (100-999), and if one is populated, the other must be as well. Error messaging should dynamically reflect these conditions, appearing when necessary and disappearing when both fields are empty. Let's delve into the code solution to address these requirements effectively.

Solution:

import React, { useEffect, useMemo, useRef } from "react";

import { useForm } from "react-hook-form";

import * as yup from "yup";

import useYupValidationResolver from "./useYupResolver";

import "./App.css";

function App() {

const isInitialLoadingRef = useRef(true);

const ERROR_MESSAGE = "Enter a number between 100 and 999";

const fieldValidation = (fieldName) =>

yup.string().when(fieldName === "field1" ? "field2" : "field1", {

is: (val) => val?.[0]?.length > 0,

then: yup

.string()

.required(ERROR_MESSAGE)

.test(

"validityTest",

ERROR_MESSAGE,

(val) => !isNaN(Number(val)) && Number(val) >= 100 && Number(val) <= 999

otherwise: yup.string().notRequired(),

});

const validationSchema = useMemo(

() =>

yup.object().shape({

field1: fieldValidation("field1"),

field2: fieldValidation("field2"),

field3: yup.string().required("Fields is required!"),

}),

[]

);

const formMethods = useForm({

resolver: useYupValidationResolver(validationSchema),

});

const { handleSubmit, register, formState, watch, trigger } = formMethods;

const { errors } = formState;

useEffect(() => {

if (isInitialLoadingRef.current) {

isInitialLoadingRef.current = false;

return;

}

trigger();

}, [watch("field1"), watch("field2"), watch("field3")]);

const onSubmit = (submitData) => {

console.log(submitData);

};

return (

<span>{errors["field1"]?.message}</span>

<span>{errors["field2"]?.message}</span>

<span>{errors["field3"]?.message}</span>

<button type="submit">Submit</button>

</form>

);

}

export default App;

Explanation:

Imports: The code imports React, useForm from react-hook-form, Yup for schema validation, and a custom validation resolver.
State Management: It uses useRef to track initial loading state and defines an error message constant.
Field Validation: Validation schemas (fieldValidation) are defined for field1 and field2 using Yup, with validation conditions depending on the other field's value.
Validation Schema: Yup's object().shape() method defines overall validation rules for field1, field2, and field3.
Form Initialization: The form is initialized using useForm hook, specifying a resolver based on the Yup validation schema.
Form Elements: Three input fields are rendered, each bound to the form using register from react-hook-form, with error messages displayed if validation fails.
Form Submission: On submission, the form data is logged to the console, ensuring robust validation before data submission.

Overall, this code provides a robust form validation mechanism using Yup schema validation and react-hook-form, ensuring that user inputs are validated according to specified rules before submission.

Suggested blogs:

>Building Web API using ASP.NET (C#)

>Built Web API using ASP.NET (C#)

>Built your simple Android App with Kotlin

>How to manage the Text in the container in Django?

>Activating Virtual environment in visual studio code windows 11

>Fix webapp stops working issue in Django- Python webapp

>Creating a form in Django to upload a picture from website

>Sending Audio file from Django to Vue

>How to keep all query parameters intact when changing page in Django?