jQuery Validate conditional error messages for same field

Question

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

"But mine doesnt have any built it validation from jquery" ~ What does "mine" refer to? If you don't install the jQuery Validate plugin, then you cannot use the code above. — Sparky
– Sparky, Commented Jul 28, 2016 at 15:28
@sparky I have updated the validation that I would want to perform. — Geek
– Geek, Commented Jul 28, 2016 at 15:30
What does "mine doesnt have any built it validation from jquery" mean?? Do you have the jQuery Validate plugin installed? — Sparky
– Sparky, Commented Jul 28, 2016 at 15:32
Once again, we cannot see the rendered HTML markup of your form so we cannot formulate the exact solution... just a general concept. — Sparky
– Sparky, Commented Jul 28, 2016 at 15:58

Sparky · Accepted Answer · 2016-07-28 16:04:20Z

6

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'
    }
});

You are missing a comma right after the aic rule.
You have an extra brace within your conditional function.
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?
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.

edited Jul 28, 2016 at 16:04

answered Jul 28, 2016 at 15:48

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Geek Over a year ago

Thanks so much. Used the code in the messages section and it helped. I have another field for password which is not a required field but other than that applies same condition as above? It works for the condition however even though i return false in the final else block action is not getting called.(case when no error message is returned) Page Uses the same form submit. Updated my code for pwd.

Sparky Over a year ago

@JNPW, please do not replace the entire content of your original question after it's been answered. It disconnects the existing answers and does not help any future readers. If you have a new question, please post a new question. Thanks.

Collectives™ on Stack Overflow

jQuery Validate conditional error messages for same field

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related