Validation issue

[eclipses]

Hi, Please click the following link: https://www.bakingwiththeory.com/en/calculators/manual-calculator-round-pizza-ingredients-indirect-dough/?pcs=4&weight=280&waste=1&idro=55&pref=100&ptype=Sponge&pidro=53&ytype=Dry&pyeast=0.2&psalt=0&yeast=0&salt=0&fat=0&malt=0 Then click on Poolish I wrote a code that changes the "% Hydration Preferment" to 100 but it is still validating with the old value. Not sure if this issue is caused by me.

[girafffee]

The problem is that plugin uses its own reactivity system, which concerns both field values and their attributes

That is, rewrite your part of the code in this way

const [ pidro ] = jQuery( 'input[name="pidro"]' );

pidro.jfbSync.attrs.min.value.current = 100;
pidro.jfbSync.attrs.max.value.current = 100;
pidro.jfbSync.value.current           = 100;

pidro.readOnly = true;

const [ psalt ] = jQuery( 'input[name="psalt"]' );

psalt.jfbSync.value.current = 0;

[eclipses]

Hi,

I've applied the changes as you suggested but now it is still running a validation and returns the error: "Please enter a number between 100 and 100."

[eclipses]

When i open the page https://www.bakingwiththeory.com/en/calculators/manual-calculator-round-pizza-ingredients-indirect-dough/?pcs=4&weight=280&waste=1&idro=55&pref=100&ptype=Sponge&pidro=53&ytype=Dry&pyeast=0.2&psalt=0&yeast=0&salt=0&fat=0&malt=0 There is an error: Uncaught TypeError: Cannot read properties of undefined (reading 'attrs')

[girafffee]

So, the problem is that the initialization of the form occurs later than your code is executed.

Instead of this code

document.querySelectorAll('input[name="ptype"]').forEach((input)=>{
        input.addEventListener('change', setMinMax);
    }
);

document.querySelector('input[name="pref"]').addEventListener('change', setMinMax);

jQuery(document).ready(setMinMax);

Enter this one

// same as jQuery.ready
jQuery( () => {
    // add action on complete initializing each form on the page
    JetPlugins.hooks.addAction(
        'jet.fb.observe.after',
        'my-custom-observable-handler',
        /**
         * @param observable {Observable}
         */
        function ( observable ) {
            // you could check formId and run this code to the specific form
            // const formId = observable.form.getFormId()

            // watch value changes in the fields
            observable.watch( 'ptype', setMinMax );
            observable.watch( 'pref', setMinMax );

            setMinMax();
        },
    );
} );

[eclipses]

Hi @girafffee,

I've applied the changes as you wrote, please check as getting still same validation error: "Please enter a number between 100 and 100."

[girafffee]

I came up with a couple of options:

• Slightly tweak the code

  // watch value changes in the fields
  observable.watch(
  'ptype',
  () => setTimeout( setMinMax, 0 ),
  );
  observable.watch(
  'pref',
  () => setTimeout( setMinMax, 0 ),
  );

• If the first option did not work: place the field with the error in the Conditional block, which is shown if the Prefermant type field is not equals Poolish. And the code remains as it is.

[eclipses]

I applied changes of the first option but still same issue. If I opene the Dev Tool and click on Biga rather than Poolish I can see that the value shown changes but the value in the tag "value" is still the old one. Maybe the issue is related to the code that assign the new value

Last option is not possible as I need to show the user that field

[eclipses]

Please do this test: Open this page https://www.bakingwiththeory.com/en/calculators/manual-calculator-round-pizza-ingredients-indirect-dough/?pcs=4&weight=280&waste=1&idro=55&pref=100&ptype=Sponge&pidro=53&ytype=Dry&pyeast=0.2&psalt=0&yeast=0&salt=0&fat=0&malt=0 Then from the console paste this code const [pidro] = jQuery('input[name="pidro"]'); pidro.jfbSync.attrs.min.value.current = 100; pidro.jfbSync.attrs.max.value.current = 100; pidro.jfbSync.value.current = 100; If you inspect the code the valus is still 53

[girafffee]

@eclipses It's a little different.

Another attempt to fix the code:

const [pidro] = jQuery('input[name="pidro"]'); 

pidro.jfbSync.value.silence();
pidro.jfbSync.attrs.min.value.silence();
pidro.jfbSync.attrs.max.value.silence();

pidro.jfbSync.value.current = 100;
pidro.jfbSync.attrs.min.value.current = 100; 
pidro.jfbSync.attrs.max.value.current = 100; 

pidro.jfbSync.value.silence();
pidro.jfbSync.attrs.min.value.silence();
pidro.jfbSync.attrs.max.value.silence();

pidro.jfbSync.onChange();

If this works, then I will make a more convenient API so that there is not so much code

[eclipses]

It seems working. As you understood my needs is that changing the selection between Biga, Poolish and Spomge I can change dinamically min and max (as written between parentherys) and do some small chnages accordingly to the selection

[girafffee]

Yes, I understand, thank you for your cooperation!

[eclipses]

Can you please keep this open so that I will know when a new change related to this will be released?