Masked Input

Sep 15, 2011 at 3:18 AM

Hello,

I wanted to get your opinion on implementing masked input/validations. I added a regularexpression attribute in the same way you implemented strlen and req attributes, and it validates social security # just fine. The problem is that I don't want the user to see 9 digits in a row "123456789" but would prefer to mask the text box like so "123-45-6789".

I found this blog: http://robertcorvus.com/automatically-validate-and-format-data-with-asp-net-mvc-and-jquery/

and successfully implemented the solution within your project. It is working now. My issue is that I feel like I'm polluting your excellent code with multiple extra classes just to accomplish this small mask functionality. What is your pro opinion? Is there a more elegant way of handling this issue? I'm basically adding 5-6 new classes to your project just to add masks to my validation attribute.

Coordinator
Sep 15, 2011 at 10:44 AM

well, as long as it works and you don't find anything better, or modify it yourself it's a solution

Sep 15, 2011 at 1:10 PM
Edited Sep 15, 2011 at 2:04 PM

Thanks. In case anyone else has a similar requirement, here is the smoothest way to implement input masks in the ProDinner project.

1) download masked input plugin

2) in the original String.aspx file(under editor templates) put this code in the content1 area:

 <%: Html.TextBox("", Model) %>
<script type="text/javascript">
jQuery(function($){ 
$("#date").mask("99/99/9999"); 
$("#MiddleName").mask("(999) 999-9999");  
$("#tin").mask("99-9999999");
$("#Ssn").mask("999-99-9999");
});
</script> 



3) add this code to WebUI root in its own class

public class CustomModelBinder : DefaultModelBinder
    {
        protected override void SetProperty(ControllerContext controllerContext, ModelBindingContext bindingContext, PropertyDescriptor propertyDescriptor, object value)
        {
            if (value != null && propertyDescriptor.PropertyType == typeof(string))
            {
                // always trim strings to clean up database padding
                value = ((string)value).Trim();

                if ((string)value == string.Empty)
                {
                    value = null;
                }
                else if ((propertyDescriptor.Attributes[typeof(PhoneAttribute)] != null
                    || propertyDescriptor.Attributes[typeof(SocialSecurityAttribute)] != null)
                    && bindingContext.ValueProvider.GetValue(propertyDescriptor.Name) != null
                    && bindingContext.ValueProvider.GetValue(propertyDescriptor.Name).AttemptedValue != null)
                {
                    value =
                        Regex.Replace(bindingContext.ValueProvider.GetValue(propertyDescriptor.Name).AttemptedValue,
                                      "[^0-9]", "");
                }
            }

            base.SetProperty(controllerContext, bindingContext, propertyDescriptor, value);
        }
    }
4) register the above model binder in Bootstrapper.cs :

ModelBinders

 

.Binders.DefaultBinder = new CustomModelBinder();

 

5) step 2 and the masked input plugin is all thats needed to add the mask. steps 3 and 4 will trim the special formatting out of the textbox before it is entered into the DB

all the other code in the link i posted is unecessary/redundant to implement input masks

 

 

edit: oh, and i have a socialsecurityattribute and phoneattribute (for example) in the same place valentin made his strlen and req attributes

you need to only initialize the attribute names and then tag the proper input fields in the Input.cs file with the attribute tags