Form validation does not work properly on defaultvalues

Forge
1

when u initialize form using defaultValues, values can seen on screen but validations give errors, like it is empty. When the page load it seems ok but when u try to submit form u will see error. When you modify fields one by one, it submit form but you should do it for all form fields.

form-error

2 Likes
2

Hey,

I can confirm this, I experienced the same behavior when using the useForm()-Hook with UI Kit 2.
I could not find a solution so far.

3

Hi @yavuzyasinCELIK , do you have a code snippet that can reproduce this issue?

I have a small example of it working as expected here - submit can be called successfully:

const FormValidationExample = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: { test: "hello" },
  });

  return (
    <>
      <Form onSubmit={handleSubmit((data) => console.log(data))}>
        <Textfield {...register("test", { required: true })} />
        <Button type="submit">submit</Button>
      </Form>
    </>
  );
};
1 Like
4

that is the code I had issue

import React, { useEffect, useState, Fragment } from 'react';
import { useForm, Form, FormHeader, FormSection, FormFooter, Label, HelperMessage, RequiredAsterisk, Textfield, TextArea, Select, Button, Spinner 
} from "@forge/react";
import ForgeReconciler, { Text } from '@forge/react';

const Configurations = (props) => {
  const { trigger, handleSubmit, register, getFieldId } = useForm(props.defaultValues);

  const setDataFromStorage = (data) => {
    console.log("set data...");
  };

  useEffect(async () => {
    console.log("load data...");
  }, []);

  return (
    <Fragment>
      <Form onSubmit={handleSubmit(setDataFromStorage)}>
        <FormHeader title="Configuraiton For OpenApi">
          Required fields are marked with an asterisk <RequiredAsterisk />
        </FormHeader>
        <FormSection>
          <Label labelFor={getFieldId("apikey")}>
            Api Key
            <RequiredAsterisk />
          </Label>
          <Textfield type='password' {...register("apikey", { required: true })} />

          <Label labelFor={getFieldId("assistant")}>
            Assitant Name
            <RequiredAsterisk />
          </Label>
          <Textfield {...register("assistant", { required: true })} />

          <Label labelFor={getFieldId("instruction")}>
            Instructions
            <RequiredAsterisk />
          </Label>
          <TextArea {...register("instruction", { required: true })} />

          <Label labelFor={getFieldId("model")}>
            Model
            <RequiredAsterisk />
          </Label>
          <Select
            options={[
              { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' },
              { label: 'gpt-4-turbo-preview', value: 'gpt-4-turbo-preview' },
            ]}
            {...register("model", { required: true })}
          />
        </FormSection>
        <FormFooter>
          <Button appearance="primary" type="submit">
            Submit
          </Button>
        </FormFooter>
      </Form>
    </Fragment>
  );
};

export default Configurations;
5

Hi @yavuzyasinCELIK is props.defaultValues there being passed through synchronously? If it’s initially undefined or is updated higher up in the tree, this could be the problem. One solution is to render Configurations only if defaultValues has returned a value.

1 Like
6

Yes I am doing as u told me. Only rendring if the value is not null but result is same.

return (
    <Fragment>
      {
        defaultValues !== null ? (
          <Configurations defaultValues={defaultValues}> </Configurations>
        ) : (
          <Spinner size="medium" />
        )
      }
    </Fragment>
  );
7

I’m having the same experience…

9

Same issue too.
@QuocLieu i’m able to replicate the issue using your example. It works fine if you click the submit button after the initial load. However, if you click on the Textfield (don’t type anything) and then click the submit, the validation fails. For some reason, the form values change to null overriding the defaultValues.

import React from 'react';
import ForgeReconciler, { Text , useForm, Textfield, Form, Button } from '@forge/react';

const FormValidationExample = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: { test: "hello" },
  });

  return (
    <>
      <Form onSubmit={handleSubmit((data) => console.log(data))}>
        <Textfield {...register("test", { required: true })} />
        <Button type="submit">submit</Button>
      </Form>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <FormValidationExample />
  </React.StrictMode>
);

video3246969119-ezgif.com-video-to-gif-converter

10

Hi @mehdizonjy , sorry for the delay. There was a bug when blurring the input field. The latest version of @forge/react (version 10.1.1) has fixed this.

2 Likes