CODEWITHSUNDEEP
javascriptjqueryvalidation
jessikwa
jessikwa

Reputation: 750

Form Validation Messages (using jQuery Validation Plugin)

Below is a function I've written for validating a simple form. You'll see three date fields: cadDocDate (required), cadRecDate (optional), occyDate (optional) that each use a custom rule of camsDate. If the date is not in the format of MM/DD/YYYY a validation message from that rule will appear.

The issue is that the date validation text of cadDocDate is always overridden by the required validation text. Is there some way to write it in such a way that only if cadDocDate is empty the required validation text shows, else show the date validation text?

       addValidation: function (parent, el) {
            $.validator.addMethod(
                "camsDate", 
                function(value, element) {
                    return this.optional(element) || value.match(/(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/);
                },
                "Dates must be entered in the format MM/DD/YYYY."
            );
            $(el).validate({
                errorClass: "validation-error",
                ignore: [],
                rules: {
                    fileType: "required",
                    fileSubType: "required",
                    fileTitle: "required",
                    cadDocDate: {
                        camsDate: true,
                        required: true
                    },
                    cadRecDate: {
                        camsDate: true
                    },
                    cadDiscipline: "required",
                    phoCompass: "required",
                    occyDate: {
                        camsDate: true
                    },
                },
                messages: {
                    fileType: "File Type is a required field.",
                    fileSubType: "Sub Type is a required field.",
                    fileTitle: "Title is a required field.",
                    cadDocDate: "Document Date is a required field.",
                    cadDiscipline: "Discipline is a required field.",
                    phoCompass: "Compass direction is a required field."
                },
                onkeyup: function (element) {
                    $(element).valid();
                    fileCenter.ui.functionality.updateErrorCount(parent);
                }
            });
        },

Upvotes: 0

Views: 113

Answers (1)

alpha-before-beta
alpha-before-beta

Reputation: 514

Yes, this is possible. It currently behaves this way since you have defined only one custom message for the cadDocDate field. So regardless what validation is called, the single message you have defined will be returned. To correct this, you should define the custom messages for the specific validation type. For example,

messages: {
         fileType: "File Type is a required field.",
         fileSubType: "Sub Type is a required field.",
         fileTitle: "Title is a required field.",
         cadDocDate: {
              required: "Document Date is a required field."
         }
}

Since this section defines custom messages, any time you do not specify text the default message defined in the validation method will be used.

Check out the documentation for further detail - http://jqueryvalidation.org/validate/

Check out this pen for a simplified example - http://codepen.io/anon/pen/vEjovP

Upvotes: 1

Related Questions