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 1 year ago.

  • 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.