Jquery Validation Plugin groups depends custom function -

i'm trying minimum price , maximum price fields work correctly using jquery validator plugin. neither field required , users can enter number in either 1 but, when both have values, want make sure minimum field smaller or equal maximum field.

it works when click submit button not inline editing.

here have html:

<form id="myform" method="post">     <div class="control-group" style="padding-bottom: 40px;">         <input id="shopping_request_min_price" name="shopping_request[min_price]" placeholder="at least...." />         <input id="shopping_request_max_price" name="shopping_request[max_price]" placeholder="no more than..." />         <div id="price_msg"></div>         <input type="submit" />     </div> </form> 

this have script:

    $('#myform').validate({     groups: {         minstrict: ' "shopping_request[min_price]" "shopping_request[max_price]" '     },     errorplacement: function (error, element) {         if (element.attr("name") === "shopping_request[min_price]" || element.attr("name") === "shopping_request[max_price]") {             return error.replaceall($('#price_msg'));         } else {             return error.insertafter($element);         }     },     rules: {         "shopping_request[min_price]": {             number: true,             min: 0,             minstrict: {                 depends: function (element) {                     return $("#shopping_request_max_price").val().length > 0 && $("#shopping_request_min_price").val().length > 0;                 }             }         },             "shopping_request[max_price]": {             number: true,             min: 0,             minstrict: {                 depends: function (element) {                     return $("#shopping_request_max_price").val().length > 0 && $("#shopping_request_min_price").val().length > 0;                 }             }         }     },     highlight: function (element) {         return $(element).closest(".control-group").removeclass("success").addclass("error").css('padding-bottom', '40px');     },     success: function (element) {         return element.text("ok!").addclass("valid").closest(".control-group").removeclass("error").addclass("success").css('padding-bottom', '40px');     } });  jquery.validator.addmethod('minstrict', (function (value, el) {     return +($("#shopping_request_min_price").val()) <= +($("#shopping_request_max_price").val()); }), "min price must less or equal max price"); 

here jsfiddle

can me figure out i'm doing wrong or should doing?

thanks in advance!

can me figure out i'm doing wrong or should doing?

i think may have misunderstood groups option. it's combining error messages 2 or more fields one. it not rule/method, nor have validation.

in case, groups option broken because field names have brackets , need surrounded in quotes. appears working custom errorplacement function.

it works when click submit button not inline editing.

not quite. notice if click on other field , click back, triggers new message.

---

1. fixing groups option...

   groups: {     minstrict: 'shopping_request[min_price] shopping_request[max_price]' }, 

2. fixing errorplacement groups working properly...

   errorplacement: function (error, element) {     if ($(element).has('[name^="shopping_request"]')) {         $('#price_msg').html(error); // put message in div     } else {         error.insertafter(element); // default     } }, 

3. when using highlight on error, use unhighlight undo when error cleared. re-working bit...

    highlight: function (element) {     $(element).closest(".control-group").removeclass("success").addclass("error").css('padding-bottom', '40px'); }, unhighlight: function (element) {     $(element).closest(".control-group").addclass("success").removeclass("error").css('padding-bottom', '40px'); }, success: function (element) {     element.text("ok!").addclass("valid"); }, 

note: not need put return in front of every jquery line in these callback functions. return gets used in circumstances.

ok, it's working normally, still need click out of field trigger validation...

https://jsfiddle.net/uvw5qjyw/8/

this happening because of depends. minstrict rule not getting evaluated because depends saying it's not yet active. have click out of field in order activate rule before it's evaluated.

the workaround force re-validation using .valid() every time key-up.

$('[name^="shopping_request"]').on('keyup', function() {     $(this).valid(); }); 

demo: https://jsfiddle.net/uvw5qjyw/10/

---

note: had console error caused including additional-methods.js file before jquery validate plugin. needs come after.