No validation in Ajax front-end submission
Support › MB Frontend Submission › No validation in Ajax front-end submissionResolved
- This topic has 15 replies, 5 voices, and was last updated 4 years, 11 months ago by
Long Nguyen.
-
AuthorPosts
-
February 24, 2020 at 7:51 PM #18386
Przemek
ParticipantWith MB Builder and MB Front End Submission (the bundled plugin) I have created a front-end form with some fields set as required.
The shortcode sets the form to be submitted via Ajax.
Unfortunately, the UI does not display validation messages about required fields but the success message instead.
The submission, however, is not being saved to the database (what is correct).Can you confirm this issue? How can I display validation messages in Ajax front-end submission?
February 24, 2020 at 8:31 PM #18389Przemek
ParticipantSome additional observations.
Safari, Chrome, WP 5.3.2, TwentyTwenty themeWhen I defined the fields in PHP instead of MB Builder with 'validation' attribute like below:
'validation' => array( 'rules' => array( $prefix . 'first-name' => array( 'required' => 1, ), $prefix . 'last-name' => array( 'required' => 1, ), ), )
- Validation errors are properly visible in non-Ajax submit
- Validation errors are replaced with success message in Ajax submit
- In both cases the fields labels have duplicated asterisk marking required fields "* *"
- When I don't use 'validation' attribute and rely just on browser's validation, the submit field remains "disabled" when I fill the fields after initial submit attempt and cannot be re-submitted (non-Ajax form)
I'm sad a bit as I wanted to use all this stuff on production without installing third-party plugins...
February 25, 2020 at 4:04 PM #18395Anh Tran
KeymasterHi, thanks for your feedback. Basically, you should not use both the "required" checkbox in the builder (which uses browser validation) and the validation required rule (which uses a JS library to check). I'll check the error and submission and see if there's any bug with that.
February 25, 2020 at 4:51 PM #18402Przemek
ParticipantHello, thank you for taking a look at that.
So far I'm using a workaround to keep MB Builder and validations together.
- I disabled Ajax for front-end forms
- I added a filter which modifies existing meta boxes by inserting validation formulas
add_filter( 'rwmb_meta_boxes', 'prefix_meta_boxes_validation_rules', 999 ); /** * Add validation rules to existing meta boxes. * * Filter hook: 'rwmb_meta_boxes' * * @since 1.0.0 * * @param array $meta_boxes Meta Box plugin's meta boxes. */ function prefix_meta_boxes_validation_rules( $meta_boxes ) { foreach ( $meta_boxes as $i => $meta_box ) : $required = []; foreach ( $meta_box['fields'] as $field ) : if ( isset( $field['required'] ) && $field['required'] ) : $required[] = [ $field['id'] => [ 'required' => 1 ] ]; endif; endforeach; if ( ! empty( $required ) ) : $meta_boxes[$i]['validation'] = [ 'rules' => $required ]; endif; endforeach; return $meta_boxes; }
April 6, 2020 at 6:32 AM #18867Benj
ParticipantHello,
I'm also affected by this: Ajax forms ignore required fields, and non ajax forms are disabled after first attempt to submit a form with an invalid field. They can't be resubmited if it fails once.I use the builder.
Not sure I understood what you said:
Basically, you should not use both the “required” checkbox in the builder (which uses browser validation) and the validation required rule (which uses a JS library to check).
How can I have both work?
April 6, 2020 at 3:25 PM #18870Long Nguyen
ModeratorHi guys,
You are right, there is a problem with the validation when the form uses Ajax to submit. I've talked with the developer team to fix this bug and it will be wrapped in the next update as soon as possible.
Thanks for your patience.
April 6, 2020 at 3:33 PM #18871Benj
ParticipantThanks Long.
And what about the NON ajax version? The fact that a first invalid submission disable the form get me stuck in this direction also.April 6, 2020 at 4:48 PM #18874Long Nguyen
ModeratorHi Benj,
The form validation works as well without the option Ajax submit
[mb_frontend_form id='meta-box-id' post_fields='title,content']
You can check the option
required
in MB builder or use the validation to validate the form input.After changing something in the Builder or the code that creates the fields, you should refresh the post/page and click Update again to apply the changes.
April 6, 2020 at 4:55 PM #18881Benj
ParticipantYes yes, I did check the "required" box. The problem is that if a field is invalid, it disable the form once for all and it can't be submitted even with valid info.
April 6, 2020 at 5:42 PM #18882Benj
Participantit's purely frontend issue in this case.
April 6, 2020 at 9:54 PM #18888Long Nguyen
ModeratorHi Benj,
Thank you, it is a bug. I also log this case and send to the developer team.
April 7, 2020 at 4:30 AM #18890Benj
ParticipantOk. Any estimation on when this will be pushed in the next release?
Thanks
May 5, 2020 at 3:23 AM #19456Jason
ParticipantI'm also having this problem. I'm not able to use required fields with AJAX, and if I disable AJAX the first attempt to submit the form without any of the required fields disables the submit button. The submit button does NOT become enabled after the required field is provided.
May 5, 2020 at 9:25 AM #19466Long Nguyen
ModeratorHi Jason,
We are working to check the issue with the Frontend Submission form and browser validate (HTML required). At this time, you can use the Validation to validate the field in the form.
https://docs.metabox.io/validation/May 5, 2020 at 10:35 PM #19474Jason
ParticipantThe Validation feature is working for me! Thank you!
Is there a way to use Validation in the custom form builder?
-
AuthorPosts
- You must be logged in to reply to this topic.