Front-end validation messages

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

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!

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!

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!

Hi Anh,

I'm sorry I wasn't more clear, yes, I updated the validate.js file with your updated code. It is still not working.

Would it be valuable to work directly on my site? I an give you access to a dev environment if you'd like.

Thank you!