Custom Fields
Re-Envisioned
Support MB Frontend Submission Front-end validation messages

This topic contains 13 replies, has 3 voices, and was last updated by  Anh Tran 1 year, 2 months ago.

  • Creator
    Topic
  • #10853
    Resolved
    jcleaveland
    Participant

    Hi,

    I have been trying to get validation rules to work on radio list fields on the front-end but I cannot seem to get them working at all.

    I can get the required custom attribute to work, but it will not let me customize the message.

    Is there a way to customize the message using the custom attribute rather than the validation rules array?

    Thanks!

Viewing 10 replies - 1 through 10 (of 13 total)
  • Author
    Replies
  • #10854

    jcleaveland
    Participant

    Hi again,

    I’ve tried with something like this inline inside the modal that I use for front-end editing to no avail.

    It works here: http://jsfiddle.net/AsuyC/298/

    but I’m not seeing how I can accurately access the form by the class.

    Any Ideas?

    
    $(document).ready(function () {
        $('.rwmb-form').validate({
            rules: {
                'obh_member_membership_tags[]': {
                  required: true
                },
                'obh_member_cohort_tags[]': {
                  required: true
                },
                'obh_member_needs_tags[]': {
                  required: true
                }
                'obh_member_grant_tags[]': {
                  required: true
                }
            },
            messages: {
                'obh_member_membership_tags[]': {
                  required: 'Select a member tag'
                },
                'obh_member_cohort_tags[]': {
                  required: 'Select a cohort tag'
                },
                'obh_member_needs_tags[]': {
                  required: 'Select a needs tag'
                }
                'obh_member_grant_tags[]': {
                  required: 'Select a grant tag'
                }
            },
        errorPlacement: function (error, element) {
            error.insertBefore(element);
        },
        });
    });
    
    #10855

    jcleaveland
    Participant

    I’m sorry to keep posting, but this is unfolding rapidly. I won’t post again until you respond.

    I found a typo in the above code. I was missing a couple of commas which was leading to an unexpected string error. After I fixed that I got this error. Then I moved the code to the footer after all scripts are enqueued thinking I might not have the validate script available yet but I am still getting this error.

    Any ideas? Thanks!

    Uncaught TypeError: $(...).validate is not a function
        at HTMLDocument.<anonymous> (?rwmb-form-submitted…bh_member_tags:2279)
        at j (jquery.min.js?ver=4.9.7:2)
        at Object.fireWith [as resolveWith] (jquery.min.js?ver=4.9.7:2)
        at Function.ready (jquery.min.js?ver=4.9.7:2)
        at HTMLDocument.I (jquery.min.js?ver=4.9.7:2)
    (anonymous) @   ?rwmb-form-submitted…bh_member_tags:2279
    j   @   jquery.min.js?ver=4.9.7:2
    fireWith    @   jquery.min.js?ver=4.9.7:2
    ready   @   jquery.min.js?ver=4.9.7:2
    I   @   jquery.min.js?ver=4.9.7:2
    #10857

    Anh Tran
    Keymaster

    Hi Jason,

    Any reason for using the validation library for custom rules? Because the plugin already has it in the core. And you can just set the rules and messages.

    #10872

    jcleaveland
    Participant

    Hi Anh,

    I have not been able to get the validation rules to work (front-end or back-end). When I include the custom validation code, the display of the page on both the front-end and the admin gets messed up. I am using a JavaScript masonry code to display the Metaboxes on the front-end. I have some custom CSS on the back end, but nothing too outrageous. There are no errors displayed in the console.

    The front-end should look like this: https://www.dropbox.com/s/1t69as0hiyb2jwt/correct-display.jpg?dl=0

    Instead it looks like this: https://www.dropbox.com/s/ntk1pm93knx9xmm/with-cutom-validation-code.jpg?dl=0

    The admin looks like this: https://www.dropbox.com/s/cqeg0qjyg9s9kcl/backend%20error.gif?dl=0

    Instead it should look like this: https://www.dropbox.com/s/gku2ydcowfsc3sa/backend-normal.gif?dl=0

    (all links are downloadable)

    I can get the “required” custom attribute for the field settings to work just fine, but not the custom validation rules (some sort of JavaScript issue).

    The “required” custom attribute works well for the majority of situations, but not for checkbox lists. With a checkbox list, the “required” custom attribute requires all check-boxes to be checked in order for the form to validate.

    This what it looks like: https://www.dropbox.com/s/pmkd635yjom58uu/with-required-custom-attribute.jpg?dl=0

    I only need one or two boxes to be checked in order to validate. I’d also like a custom message.

    I realize this is a complex issue involving many different parts and several potentially conflicting scripts. In the event that I cannot get a custom message, just modifying the core code to accommodate a checkbox-list would be sufficient for my needs.

    Here is the complete code for the Metabox: https://gist.github.com/obodohub/15d9f02f1807845fa3fa0b2ef9a3b88a

    Let me know your thoughts.

    Thanks!

    #10885

    Dan
    Participant

    Anh- I’m having similar issue as the OP in terms of validation. I’ve tried the validation hook and also the normal jquery validation syntax, but nothing seems to work for a few field types. Notably, for me, is image select, which might be similar to OP’s radio button issue.

    I already do a lot of stuff at rwmb_frontend_insert_post_data before wp_insert_post, so my workaround is to check then to see if its empty, and if so keep the post in draft and set up a validation-like message on the redirect when the (nearly) completed post appears again on the other side. But I try to avoid what I term “wordpress workarounds” whenever I can 🙂

    thanks!

    #10895

    Anh Tran
    Keymaster

    Hey guys. Thanks a lot for your details. Let me check Jason’s code first. Looks like it’s more complicated than I thought.

    #11003

    Anh Tran
    Keymaster

    Hi Jason,

    I found 3 things:

    1. Your syntax isn’t correct. You need to put validation rules as a param of meta box, not under fields. Here is the correct code: https://ghostbin.com/paste/gnch6
    2. In the rules and messages, because the field is a checkbox list, its checkboxes has name obh_member_membership_tags[], not obh_member_membership_tags. We have to use the input name, not the field ID. See the code in point 1 how I fixed it. I should have mentioned that clearer in the docs.

    3. There’s also a bug with Meta Box, I’ve fixed it on Github.

    Please try it and let me know if there’s still any bug.

    #11027

    jcleaveland
    Participant

    Hi Anh,

    I updated my code so that the validation rules are a parameter of the Metabox and not the fields. I also updated the metabox plugin validate.js file to reflect the changes.

    I also confirmed that Metabox and all other Metabox.io plugins are up to date.

    I am still getting no validation.

    A couple of things to note:
    1. The required symbol (*) is now displaying – it wasn’t before.
    2. After this change, the required attribute no longer works.

    There are no errors in the console.

    Let me know what more I can do to be helpful.

    Thanks!

    #11061

    Anh Tran
    Keymaster

    Hi Jason, can you give me the updated code to register meta box to check again? Have you taken a look at my code?

    #11064

    jcleaveland
    Participant

    Hi Anh,

    I do 99.9% of my editing from the front-end. I just made an edit from the backend and the validation works there as expected. I apologize for not being more clear and more timely in my communication there.

    I am still getting nothing for the front-end though.

    I use the front-end form in a bootstrap modal, I’m not sure if that could be the issue.

    Thanks for all your help!

Viewing 10 replies - 1 through 10 (of 13 total)

You must be logged in to reply to this topic.