JNPW JNPW - 4 months ago 4
jQuery Question

jQuery Validate conditional error messages for same field

I would want to different error messages for a single field based on conditions like below.

jQuery(document).ready(function () {
//...


..//

$("#aID").validate({
rules: {
reason: "required",
aic: "required"
aAmt:{
required: function (element) {
var err;
var new_balance = Math.round(100*beg_balance)/100 - Math.abs(Math.round(100*adjustAmount)/100);
if ((parseInt(aAmount) >= parseInt(a_limit_amount))) {
err = "123";
return true;
}
else if (new_balance)
{

err = "321";
return true;
}
return false;
}
}
}
},
messages: {
reason:"Please select a reason code.",
aic: "Please select a credit AIC.",
pwdOverride: err
},

});


There is an option like below

messages: {
RoutingNumber: {
required:"Message1",
digits: "Message2",
rangelength: "Message 3"
}
}


But mine doesn't have any built it validation methods from this plugin.
Any help on how to achieve it?

What I mean for built in validation is if you see my else loop for
aAmt
:
rules
, it doesn't fit in jQuery Validate's built in validation such as: List of built in validation methods

Answer

You have some serious syntax issues here as indicated in my comments below.

$("#aID").validate({
    rules: {
        reason: "required",
        aic: "required" // <- MISSING a comma here
        aAmt: {
            required: function(element) {
                var err;
                var new_balance = Math.round(100 * beg_balance) / 100 - Math.abs(Math.round(100 * adjustAmount) / 100);
                if ((parseInt(aAmount) >= parseInt(a_limit_amount))) {
                    err = "123";
                    return true;
                } else if (new_balance) {
                    err = "321";
                    return true;
                }
                return false;
                }  // <- REMOVE extra brace
            }
        }
    },
    messages: {
        reason: "Please select a reason code.",
        aic: "Please select a credit AIC.",
        pwdOverride: err   // <- no such field defined in 'rules'
    }
});
  1. You are missing a comma right after the aic rule.

  2. You have an extra brace within your conditional function.

  3. Within messages you are referring to a field named pwdOverride, but there is no such field defined within rules. How can you define a validation error message on a field that has no validation rules?

  4. Your conditional function for custom messages should be contained within the messages object, not the rules object. rules is for defining the rules and messages is for defining the messages.

Updated:

$("#aID").validate({
    rules: {
        reason: "required",
        aic: "required",
        aAmt: "required"
    },
    messages: {
        reason: "Please select a reason code.",
        aic: "Please select a credit AIC.",
        aAmt: {
            required: function(element) {
                var err = "this field is required"; // default message
                var new_balance = Math.round(100 * beg_balance) / 100 - Math.abs(Math.round(100 * adjustAmount) / 100);
                if ((parseInt(aAmount) >= parseInt(a_limit_amount))) {
                    err = "123";
                } else if (new_balance) {
                    err = "321";
                }
                return err;  // <- display the custom message
            }
        }
    }
});

Since you have not shown us the HTML markup of your form, I can only provide a generic proof-of-concept example: jsfiddle.net/3of700am/

NOTES:

  • Pay attention to you JavaScript console because it will tell you about many of these syntax errors.
  • Properly format and intent your code so it's easier to read and troubleshoot. Once formatted, extra/missing brackets/braces are easy to find.
Comments