No validation in Ajax front-end submission

Support MB Frontend Submission No validation in Ajax front-end submissionResolved

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #18386
    PrzemekPrzemek
    Participant

    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?

    #18389
    PrzemekPrzemek
    Participant

    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,
                    ),
                ),
            )
    1. Validation errors are properly visible in non-Ajax submit
    2. Validation errors are replaced with success message in Ajax submit
    3. In both cases the fields labels have duplicated asterisk marking required fields "* *"
    4. 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...

    #18395
    Anh TranAnh Tran
    Keymaster

    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.

    #18402
    PrzemekPrzemek
    Participant

    Hello, thank you for taking a look at that.

    So far I'm using a workaround to keep MB Builder and validations together.

    1. I disabled Ajax for front-end forms
    2. 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;
    }
    #18867
    BenjBenj
    Participant

    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?

    #18870
    Long NguyenLong Nguyen
    Moderator

    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.

    #18871
    BenjBenj
    Participant

    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.

    #18874
    Long NguyenLong Nguyen
    Moderator

    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.

    #18881
    BenjBenj
    Participant

    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.

    #18882
    BenjBenj
    Participant

    it's purely frontend issue in this case.

    #18888
    Long NguyenLong Nguyen
    Moderator

    Hi Benj,

    Thank you, it is a bug. I also log this case and send to the developer team.

    #18890
    BenjBenj
    Participant

    Ok. Any estimation on when this will be pushed in the next release?

    Thanks

    #19456
    JasonJason
    Participant

    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.

    #19466
    Long NguyenLong Nguyen
    Moderator

    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/

    #19474
    JasonJason
    Participant

    The Validation feature is working for me! Thank you!

    Is there a way to use Validation in the custom form builder?

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.