Custom Fields
Re-Envisioned
Support MB Frontend Submission Define validation rules for group

This topic contains 2 replies, has 2 voices, and was last updated by  calpaq 10 months ago.

  • Creator
    Topic
  • #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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #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').

    #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

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

You must be logged in to reply to this topic.