question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Field Level Validation Falsely updates sync errors to Empty Object on Change Event alternatively

See original GitHub issue

I have a weird problem with field level validation. I have attached the bug behavior in the screen share. I have a Field with simple field level validation which onChange dispatches “UPDATE_SYNC_ERRORS” alternatively with correct error object and empty error object(even when the error object should not be empty). If you check the video, it’ll be more clear. The field I was tinkering with in the video is the following

<Field 
  name={`${packagePriceFieldName}.unit_price`}
  placeholder="Price Per Package"
  label="Unit Price"
  component={index === 0 ? StaticInput : CurrencyInput}
  seed={baseUnitPrice}
  validate={[required, currency]}
/>

Index is the element index in the array(in my case it would be 1) packagePriceFieldName is the parent field name(in my case it’s ‘package[0].package_price[1]’) baseUnitPrice is a prop which is only used when index is 0. (so unnecessary)

When I’m tinkering with the input, even the console logs say that validation is false and still after onChange an action is dispatched with empty error object incorrectly.

The two validation functions are as follows:

export const required = value => value ? undefined: 'Required';
export const currency = value => {
  const validation = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/.test(value);
  console.log("Currency", value);
  console.log("validation", validation);
  return validation ? 
    undefined : 'Invalid Amount';
}

I also have exported the action dispatched throughout the page into json from react redux devtools.

Here’s a link for the attachments. https://drive.google.com/open?id=0ByZzhBPM_O4LNzE3cXA2QjcxaFE

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
gustavohenkecommented, Feb 22, 2017

@mqklin, even though the validate prop is documented like that, the examples demonstrate that you can use it as an array: https://redux-form.com/6.5.0/examples/fieldLevelValidation

2reactions
boy-techycommented, Apr 9, 2018

Some add on in @buzjuka 's answer: Reference for validate function must be same otherwise your field will go into loop of RegisterField and UnregisterField.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error handling with sync—ArcGIS REST APIs
This topic discusses error cases when using the feature service's createReplica ... executed with async=false), the request is lost and must be reissued....
Read more >
Validation · React Redux Form
Validation occurs as the result of dispatching validation actions, such as actions.setValidity(model, validity) or actions.setErrors(model, errors) . That ...
Read more >
form-kirin - npm Package Health Analysis
validate : field level validator function , receive field value, field name, entire form values, and props of the form control as arguments....
Read more >
Handling Forms - VeeValidate
If you have a submit listener on the Form component, vee-validate assumes you will be handling submissions via JavaScript (AJAX) and automatically calls...
Read more >
Error reference | Anthos Config Management
This error indicates that Config Sync cannot read from the source Git repository, OCI image or Helm repository. It is usually caused by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found