0

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);
                }
            });
        },
Improve this question

1 Answer 1

Reset to default
0

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

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

3 Comments

Perhaps I misunderstand, but the way you've written the message definitions is equivalent to the way I wrote it in my example, is it not? My issue was not that the 'default' message shows, its that the custom required message shows in place of the custom date message
There is a slight difference. Notice after cadDocDate you write the message. In my example, after cadDocDate I have an object literal. Notice the { required: "Document Date is a required field." }.
Aha! I understand it now. Tyvm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.