Solved

Validation message display issue with Elementor Forms

  • 29 April 2021
  • 4 replies
  • 300 views

I hope I’ve put this in the correct Room.

 

I’m wondering if anyone cloud help me with why, when using PHP validation with elementor forms, a text field will display the validation error message below it, but a select (dropdown) field will display the error message inline, displacing the field in an ugly manner.

It's not stopping the field from working but it's not a very pretty result. I've added images below to show what I mean. I’ve tried styling in CSS, but no luck. Seems it’s posting in the same span as the field, but I can’t figure out a way around it.

I’d appreciate the help. Thanks in advance.

 

(using dynamic.ooo with forms for conditional logic and php validation rules)

 

Text area field displays validation error message on new line
Select field displays validation error message inline, offsetting the toggle icon

 

icon

Best answer by Giovanni Cintolo 21 May 2021, 15:35

View original

4 replies

Userlevel 7
Badge +6

Hi @Josh I’ve just asked the creator of Dynamic.ooo to chime in. 

Hey ​​​​@Giovanni Cintolo Are you able to help him perhaps?

Userlevel 6
Badge +3

@Mario Barretta You also seem to be an answer master (your new title? ; ) any thoughts on this one.

Hi @Verdi Heinz really  thank you for your appreciation and I sincerely hope that you do not take it but prefer not to express any opinion or judgment in this regard.
I have a lot of advice and suggestions and hope to be useful to many other users.
I apologize again if I don't accept your invitation but I prefer not to express any opinion or judgment in this regard.

Badge +1

Hi @Josh  we are using Elementor API to set the errors.
We reported it to Elementor. In the meantime, you can solve it with a CSS fix.
Thanks for your report.
 

.elementor-select-wrapper.elementor-error {
flex-wrap: wrap;
}
.elementor-select-wrapper.elementor-error::after{
top: 25%;
}
.elementor-select-wrapper.elementor-error::before{
top: 25%;
}

 

Hi @Josh  we are using Elementor API to set the errors.
We reported it to Elementor. In the meantime, you can solve it with a CSS fix.
Thanks for your report.
 

.elementor-select-wrapper.elementor-error {
flex-wrap: wrap;
}
.elementor-select-wrapper.elementor-error::after{
top: 25%;
}
.elementor-select-wrapper.elementor-error::before{
top: 25%;
}

 

Hi @Giovanni Cintolo ,  that works great. I did try to get elementor support’s help as I knew it was ultimately an Elementor API, because I could replicate it without the dynamic.ooo plugin active (or any other plugin active for that matter. In the end, they reported it to their dev team.

I appreciate your support here. Thanks.
@Verdi Heinz , thanks for bringing giovanni into the question to help.

Reply