Crocoblock / jetformbuilder

79 stars 16 forks source link

Advanced Validation Type different behaviour #295

Closed eclipses closed 1 year ago

eclipses commented 1 year ago

Hi,

I have different behaviour in two pages where I setup Advanced validation type: https://www.bakingwiththeory.com/en/calculators/manual-calculator-round-pizza-ingredients-direct-dough/ It shows the red message under every mandatory field when I open the page but this does not happen with my contact form https://www.bakingwiththeory.com/en/contact-me/

Please let me know if I did something wrong.

eclipses commented 1 year ago

I've noted similar issue with Repeaters

Page: https://www.bakingwiththeory.com/en/calculators/manual-calculator-pan-pizza-or-focaccia-ingredients-direct-dough/

image

eclipses commented 1 year ago

Also datatime field does not show validation messages

Page: https://www.bakingwiththeory.com/it/calcolatori/calcolatore-biga/

image

girafffee commented 1 year ago

@eclipses Yes, it does happen because of the use of the "is_valid" field. I will fix this in the addon soon

girafffee commented 1 year ago

The problem was that the Calculated Field initiated a check of its value, although this does not make sense, because the value in this field is completely different from other fields.

That is, the "required" option was removed from the Calculated Field.

You can download the plugin from this branch, or wait for the official release

P.S. The addon JetFormBuilder Is Valid Inputs field has not undergone any changes

eclipses commented 1 year ago

I've downloaded the plugin from the link you provided but it is failing the installation

image

girafffee commented 1 year ago

This is normal, because WordPress recognized your archive as a separate plugin, so that this does not happen, you should rename the archive to jetformbuilder

eclipses commented 1 year ago

Ok, I've installed it but from my tests everything looks same as before. Please check and elt me know

girafffee commented 1 year ago

image

Yes, the fields are highlighted in red, but because of your own styles. My fix removes the "Please fill in a field" message below the fields.

If you are not satisfied with the red borders, I advise you to change input:invalid to .field-has-error.jet-form-builder-row input css-selector

eclipses commented 1 year ago

I need and want the message "Please fill in a field", I asked you in a separated ticket how to get the message and you told me to enable the Advanced validation. This issue is that not all the fields show the message

eclipses commented 1 year ago

Reference: https://github.com/girafffee/jfb-is-valid-inputs-field/issues/1

girafffee commented 1 year ago

I need and want the message "Please fill in a field"

No, this message will appear, but only after interacting with the field. Because before this message was displayed immediately when the page was loaded

It shows the red message under every mandatory field when I open the page

it should not have been like that.

eclipses commented 1 year ago

Is there any way I can get this message for all required fields on open of the page? This is my desidered result when I open the page image This currently works opening the page: https://www.bakingwiththeory.com/en/calculators/manual-calculator-round-pizza-ingredients-direct-dough/ But it does not work when I open the contact page: https://www.bakingwiththeory.com/en/contact-me/ image

girafffee commented 1 year ago

This is my desidered result when I open the page

It turns out that I understood you exactly the opposite. You wrote that the appearance of the forms was different and it was obvious to me that the messages should not be shown until you interact with some field.

All the plugins I know work according to this principle, and I think for most it is not a very pleasant experience when you have not done anything yet, and the form is more like where and how you should enter

So I made the first form (https://www.bakingwiththeory.com/en/calculators/manual-calculator-round-pizza-ingredients-direct-dough/) have the same behavior as here https://www.bakingwiththeory.com/en/contact-me/

You still have a difference in the screenshots, because the browser most likely cached the scripts - this will pass if you open the page with incognito, or clear the browser cache yourself.

If you really want to do the opposite, so that the red messages are displayed immediately when the page is loaded, then I can only suggest a custom js script

eclipses commented 1 year ago

Thank you, I deleted the cache and now I can see the changes in the page. I'm not an expert in web, I will add a line on the top of the page saying that fields marked in red (my CSS) are mandatory or with error. Do you think that also the CSS with red border is too much? Please let me know. Thanks you again for your support, really appreciated

girafffee commented 1 year ago

If you are interested in my opinion, then I would do it as follows.

Not all fields are filled All fields are filled
image image

For this, the following steps are necessary:

  1. Make the first conditional block that will be displayed if the is_valid field is empty.
  2. Inside this block, add a block with text that tells you to fill in all the fields
  3. Make a second conditional block. Its condition can be the same as in the first one, but with the "Hide" function
  4. Move all Calculated Fields with columns to the second block.

I also experimented with borders, but for this it takes more time to take into account all possible cases. Therefore, if you are not sure about them, you can remove them :)

And I close the issue, since the original problem has already been solved, thanks for the report

girafffee commented 1 year ago

@eclipses By the way, I know that you have been using our plugin for quite some time and I would be very grateful if you would leave us a review on the official page of the plugin. Thank you in advance :)