jQuery / MVC and TextArea Length Validation

I came across this issue today, and actually surprised I have not had to resolve this problem earlier.  When validating a textarea on the client side with jQuery unobtrusive validation (for length) you have to be conscientious about how JavaScript deals with carriage return/line feed characters in comparison to the posted values to your controller.  For example on the client JavaScript sees CR/LF as \n while after posted to the server that same CR/LF will be represented by \r\n.  If you are validating the user entered data for length your counts will be different depending on the environment (i.e. model will pass validation on the client but fail on the server).

The resolution was to fix the data server side.  This was done with a customization/extension to the DefaultModelBinder, so that all controller actions will benefit immediately.  You will notice that I trimmed the original input and then replaced \r\n with \n. 

 

   
        protected override void BindProperty(ControllerContext controllerContext, ModelBindingContext bindingContext, PropertyDescriptor propertyDescriptor)
        {
            base.BindProperty(controllerContext, bindingContext, propertyDescriptor);

            // Note: if desired, one could restrict the conversion to properties decorated with [StringLength]:
            // && propertyDescriptor.Attributes.OfType().Any()
            if (propertyDescriptor.PropertyType == typeof(string))
            {
                var originalString = propertyDescriptor.GetValue(bindingContext.Model) as string;
                if (!string.IsNullOrEmpty(originalString))
                {
                    originalString = originalString.Trim();
                    var stringWithNormalizedNewlines = originalString.Replace("\r\n", "\n");
                    propertyDescriptor.SetValue(bindingContext.Model, stringWithNormalizedNewlines);
                }
            }
        }

Author

Admin

comments powered by Disqus

Categories

Recent Tweets

"Setting up and Getting Started with Power BI Embedded | Data Exposed" channel9.msdn.com/Shows/Data-Exp… #webcast #feedly
Retweeted by @dyardy @scottgu @victoriabeckham Worlds collide, double take on that photo!
@scottgu @victoriabeckham Worlds collide, double take on that photo!
@projectedxyz It is really easy, what are you doing (isn't this data which on the web)