MVC- Custom Data Annotations validation server and client side

How to validate model in MVC?

Validation is most important part in any website which allows entering information.

Now, question is what is the easiest way to implement validation on MVC application?

Fortunately MVC provide a great facility for implement data validation using DataAnnotation.

I hope now day all are aware about of data annotation and attribute pattern for code, If you not aware then please do quick google for that.

In C# using data annotation we can validate our model using validation attributes

Need to add Data Annotation DLL: System.ComponentModel.DataAnnotations

It is inbuilt providing some validation attributes like required, string length etc..

In MVC we are prefer to working by model and we can validate model using data annotation class.

Example:

           public class TestModel2
            {
                public int Id { get; set; }
                [Required(ErrorMessage = "Name is Required")]
                public string Name { get; set; }
                [Required(ErrorMessage = "Email is Required")]
                [RegularExpression(@"^[\w\.=-]+@[\w\.-]+\.[\w]{2,3}$",
                     ErrorMessage = "Please enter valid email")]
                public string Email { get; set; }
                [StringLength(300)]
                public string Description { get; set; }
                [Compare("Email", ErrorMessage = 
                    "User name should be email id")]
                public string Username { get; set; }
                public DateTime PlanStratDate { get; set; }
                public DateTime PlanEndDate { get; set; }
                public string ExternalId { get; set; }
            }

           

We can validate model in both way at server side and also at client site.

For validation at client side we need to do some setting in web.config file.

In MVC 3 and onward that setting comes by default if u create project from internet website template.

MVC providing jquery.validate.js and [jquery.validate.unobtrusive.js for client side validation.

For more details about unobtrusive.js please refer blog : http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

In web.config file we need to add


Using built in validation attributes we covered almost every scenario. But in some case we need out of box validation.

For out of box validation we can create custom validation attributes and set on model.

Example:

       
        public class TestModel2
            {
                public int Id { get; set; }
                [Required(ErrorMessage = "Name is Required")]
                public string Name { get; set; }
                [Required(ErrorMessage = "Email is Required")]
                [RegularExpression(@"^[\w\.=-]+@[\w\.-]+\.[\w]{2,3}$", 
                ErrorMessage = "Please enter valid email")]
                public string Email { get; set; }
                [StringLength(300)]
                public string Description { get; set; }
                [Compare("Email", ErrorMessage =
                "User name should be email id")]
                public string Username { get; set; }
                public DateTime PlanStratDate { get; set; }
                [GratherThen("PlanStratDate")]
                public DateTime PlanEndDate { get; set; }
                [ExternalIdPattern]
                public string ExternalId { get; set; }
            }

        

First we need to create custom validation class and inherit from Validation Attribute class

After that need to implement one IsValidate override method and add your custom validation code in this method.

That's all almost done Now server side validation working for model.

Validation Class:

       public class ExternalIdPatternAttribute : ValidationAttribute , IClientValidatable
        {
            public ExternalIdPatternAttribute() : 
            base("External id should be match with system pattern") { }

            public override bool IsValid(object value)
            {
                const string matchingPattern = "code4help";
                return Convert.ToString(value).Contains(matchingPattern);
            }

            public IEnumerable[ModelClientValidationRule] GetClientValidationRules
            (ModelMetadata metadata, ControllerContext context)
                {
                   var errorMessage = ErrorMessageString;
                    var extidrule = new ModelClientValidationRule();
                    extidrule.ErrorMessage = errorMessage;
                    extidrule.ValidationType = "externalidpattern";
                    //extidrule.ValidationParameters.Add("otherpropertyname",
                         otherPropertyName);

                    yield return extidrule;
                }
         }


                
                


        public class GratherThenAttribute : ValidationAttribute , IClientValidatable
            {
                public string OtherProperty { get; set; }

                public GratherThenAttribute(string oprop)
                    : base("{0} should be grather then {1}")
                {
                    this.OtherProperty = oprop;
                }

                protected override ValidationResult IsValid(object value,
                 ValidationContext validationContext)
                {
                    var validationResult = ValidationResult.Success;
                    var otherPropertyval = 
                    validationContext.ObjectType.GetProperty(this.OtherProperty);
                    if (otherPropertyval.PropertyType == new DateTime().GetType())
                    {
                        var edate = (DateTime)value;
                        var sdate = 
                        (DateTime)otherPropertyval.GetValue(validationContext.ObjectInstance,
                         null);

                        if (edate.CompareTo(sdate) < 1)
                            validationResult = new ValidationResult(ErrorMessageString);
                    }
                    else
                        validationResult =
                            new ValidationResult(
                                "An error occurred while validating the property.
                                 OtherProperty is not of type DateTime");
                    return validationResult;
                }

                public IEnumerable[ModelClientValidationRule] 
                    GetClientValidationRules(ModelMetadata metadata, 
                    ControllerContext context)
                        {
                            var errorMessage = ErrorMessageString;

                            var extidrule = new ModelClientValidationRule();
                            extidrule.ErrorMessage = errorMessage;
                            extidrule.ValidationType = "gratherthen";
                            extidrule.ValidationParameters.Add("otherproperty", OtherProperty);

                            yield return extidrule;
                        }
                    }

            

For client side validation we need to implement IClientValidatable interface on custom validation class and get validation rule.

In validation rule validation type and all parameter should be in small case.

Now for start validation on client side we need to add custom javascript in unobtrusive script.

Code for custom validation client side:

            $.validator.addMethod("externalidpattern", function (value, element, params) {
            return Date.parse(value) > Date.parse($(params).val());
            });
            $.validator.unobtrusive.adapters.add("externalidpattern", [], function (options) {
                options.rules["externalidpattern"] = "#" + options.params.otherpropertyname;
                options.messages["externalidpattern"] = options.message;
            });

            $.validator.addMethod("gratherthen", function (value, element, params) {
                return Date.parse(value) > Date.parse($(params).val());
            });
            $.validator.unobtrusive.adapters.add("gratherthen", ["otherproperty"], function (options) {
                options.rules["gratherthen"] = "#" + options.params.otherpropertyname;
                options.messages["gratherthen"] = options.message;
            });

            

Okay now all done. Just need to add above js on page and all done for client and server side validation with custom attribute.

I Hope it will help!
Feel free to add comment. Enjoy coding.