Define validation rules for group

This topic has 2 replies, 2 voices, and was last updated 1 year, 7 months ago by calpaq.

Creator

Topic
April 16, 2018 at 7:06 PM #9237
calpaq
Participant
Hi, Anh
Thanks for helping me in Defining custom validation methods topic. I have one more question, I want to put the error message after group of inputs and I tried to do that with following code
```
jQuery.validator.addMethod('checkinputsportrow', function(element, value, param ){
        filledinputs = jQuery('.grpsports input:text:filled').size();
        allinputs  = jQuery('.grpsports input:text').size();

        if ( filledinputs == allinputs && filledinputs <= 0 ){
            return false;
        } else if ( filledinputs != allinputs && filledinputs != 0 ) {
            return false;
        }

        return true;
}, "Please Fill Complete information for  Achievements in Sports" );
```
I have defined the fields under the group field having class grpsports
Above validation is working but error placement (below ) does not, also works for clone fields but does not clear errors when it is correct and new set of cloned fields are there (workaround ?)
```
jQuery("form#post").validate({
          errorPlacement: function(error, element) {
        if (element.closest('.grpsports'))
            error.insertAfter(".grpsports input:text:last");
        },
    });
```
the above method needs a specific form id where as in backend its “post” and in front end its “rwmb-form” how can I make it generic

also I am in confusion that how to define a group in validation plugin

can you please help me
Thanks in advance
Creator

Topic

Viewing 2 replies - 1 through 2 (of 2 total)

Author

Replies
April 18, 2018 at 8:34 AM #9250
Anh Tran
Keymaster
Hi,

I think your jQuery selector is too generic. It targets .grpsports, which is all element having that class. In the JS code, there’s a parameter element that you should use to get its parent group element, and add the error message to that group only. Please try this:
```
jQuery('#post').validate({
    errorPlacement: function(error, element) {
        var $group = element.closest('.grpsports');
        if ($group.length) {
            error.insertAfter($group.find('input:text:last'));
        }
    }
});
```
To target the form in both admin/frontend, you can use multiple selector like jQuery('#post, .rwmb-form').
April 18, 2018 at 1:21 PM #9256

calpaq
Participant

Hey,
I tried your solution but it doesn’t work, actually my problem is it doesn’t go to the code or doesn’t execute the errorPlacement custom function we are defining.
To see that I have placed a breakpoint at
var $group = element.closest(‘.grpsports’);
in debugger
it should now show the debug window (using chrome inspector -> sources to debug) and stop at the above statement but that is not happening.

Note: It displays me error below the field & my goal is to display error after the group which is generic to all the fields in the group.

Thanks for multiple selector suggestion ( just curious, will it break if one of the selector is not there ?)

Thanks & Regards
Author

Replies

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Newsletter