Support Forum
Support › MB Frontend Submission › No validation in Ajax front-end submissionResolved
With 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?
Some additional observations.
Safari, Chrome, WP 5.3.2, TwentyTwenty theme
When 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,
),
),
)
I'm sad a bit as I wanted to use all this stuff on production without installing third-party plugins...
Hi, 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.
Hello, thank you for taking a look at that.
So far I'm using a workaround to keep MB Builder and validations together.
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;
}
Hello,
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?
Hi 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.
Thanks 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.
Hi 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.
Yes 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.
it's purely frontend issue in this case.
Hi Benj,
Thank you, it is a bug. I also log this case and send to the developer team.
Ok. Any estimation on when this will be pushed in the next release?
Thanks
I'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.
Hi 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/
The Validation feature is working for me! Thank you!
Is there a way to use Validation in the custom form builder?