Custom Fields
Re-Envisioned
Support MB Frontend Submission No validation in Ajax front-end submission

  • Creator
    Topic
  • #18386
    Resolved Przemek
    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?

Viewing 10 replies - 1 through 10 (of 15 total)
  • Author
    Replies
  • #18389
    Przemek
    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 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
    Przemek
    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
    Benj
    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 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
    Benj
    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 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
    Benj
    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
    Benj
    Participant

    it’s purely frontend issue in this case.

    #18888
    Long Nguyen
    Moderator

    Hi Benj,

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

Viewing 10 replies - 1 through 10 (of 15 total)
  • You must be logged in to reply to this topic.
grid gear info copy caret-up caret-down trash