This is a migrated thread and some comments may be shown as answers.

Form Validation with Default Values

3 Answers 2015 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 2
Dennis asked on 17 Jun 2020, 05:29 PM

I am using @progress/kendo-react-form with @progress/kendo-react-inputs to create a form. I am using the form to edit existing data, and to add new records as well, populated from and saved to a db server.

To get the data for existing records to display, I am using defaultValue for each input. However, when trying to validate the form, validation only registers that the form element actually has data when it has been changed through user input. 

So if I open a form and change one field, other fields that had not been changed, and which still show the defaultValue value, are considered invalid.

What is the best practice way to use form validation on a form used for editing existing data?

Here is a really simple example:

https://stackblitz.com/edit/react-5phafx

 

3 Answers, 1 is accepted

Sort by
0
Dennis
Top achievements
Rank 2
answered on 17 Jun 2020, 08:47 PM

I think I may have found a solution, or at least, a workaround. If, instead of setting defaultValue={valueObject} on each individual form element, I create an object with default values for the form in it and pass it to the defaultValues={valuesObject} it works. When submitting a validated form (with a validator for the form rather than individual validators for the individual form inputs), validation occurs correctly.

Interestingly, the values returned in the form's onSubmit function is all the values set and not just the ones changed.

I updated my previous example at https://stackblitz.com/edit/react-5phafx?file=app%2Fmain.jsx

0
Accepted
Stefan
Telerik team
answered on 18 Jun 2020, 08:41 AM

Hello, Dennis,

Thank you for the information and the examples.

Indeed using the Form initialValuesis is the correct way to set the values initially:

https://www.telerik.com/kendo-react-ui/components/form/api/FormProps/

One very important fact for the Form is that when it is used, the values have to the set and controlled by the Form not individually for each field. If a custom field is used, its value and changes has to go through the Form props.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lex
Top achievements
Rank 1
Iron
answered on 07 Jun 2023, 12:36 AM
The accepted  answer will not work on FieldArray fields. Because it's know known how many will be submitted. So, actually submitting a field with default value not modified would be nice. I am struggling to make it work.

Please support
Filip
Telerik team
commented on 08 Jun 2023, 01:44 PM

Hello, Lex,

In more complex scenarios for submitting the Form, we recommend using the onSubmitClick event of the Form instead, where you can perform custom logic for submitting. Using the onSubmitClick can also allow you to submit the Form without modifications:

https://stackblitz.com/edit/react-aaq82w-vvcdqg?file=app%2Fmain.jsx

I hope this helps.
Tags
General Discussions
Asked by
Dennis
Top achievements
Rank 2
Answers by
Dennis
Top achievements
Rank 2
Stefan
Telerik team
Lex
Top achievements
Rank 1
Iron
Share this question
or