Front-end validation messages

This topic has 13 replies, 3 voices, and was last updated 6 years, 3 months ago by Anh Tran.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
August 3, 2018 at 6:17 AM #10853

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!

Add New Note to this Reply

August 3, 2018 at 7:01 AM #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);
    },
    });
});
```
Add New Note to this Reply
August 3, 2018 at 7:17 AM #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
```
Add New Note to this Reply
August 3, 2018 at 4:08 PM #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.

Add New Note to this Reply

August 4, 2018 at 3:42 AM #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!

Add New Note to this Reply

August 5, 2018 at 7:22 PM #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!

Add New Note to this Reply

August 6, 2018 at 3:57 PM #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.

Add New Note to this Reply

August 14, 2018 at 3:46 PM #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.

Add New Note to this Reply
August 17, 2018 at 5:38 AM #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!

Add New Note to this Reply

August 20, 2018 at 1:52 PM #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?

Add New Note to this Reply

August 20, 2018 at 2:39 PM #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!

Add New Note to this Reply

August 21, 2018 at 12:08 PM #11079

Anh Tran
Keymaster

Hi Jason,

I understand that the validation doesn't work in the frontend. However, in a previous reply, I posted the "fixed" code and explained my change. Did you follow that?

If it still doesn't work, please send me your code. I'll check it again.

Add New Note to this Reply

August 22, 2018 at 12:24 AM #11085

jcleaveland
Participant

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!

Add New Note to this Reply

August 23, 2018 at 3:03 PM #11097

Anh Tran
Keymaster

Hi Jason,

Please send me access to your site via contact form. I'll check that.

Add New Note to this Reply
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.