a developer's notes – a semi-technical web development BLOG

April 2, 2014

Using HTML5 Data Annotations for Zipcode and Telephone Numbers

Filed under: ASP.NET MVC,Javascript / JQuery — Duy Nguyen @ 11:22 am
Tags: , , , , , ,

Setup your view model properties with HTML 5 attributes:

[Required]
[DataType(DataType.PhoneNumber)]
public string Phone { get; set; }

[Required]
[DataType(DataType.PostalCode)]
public string ZipCode { get; set; }

Then in your script file, you can have controls use jquery.MaskedInput and also add the bootstrap css class “form-control”

    setupMaskInputs: function () {
        // Any view model property that has a [DataType(DataType.PhoneNumber)] attribute, renders type=tel
        if ($("input[type='tel']").length > 0) {
            $("input[type='tel']").mask("(999) 999-9999? ext.9999", { placeholder: " " });
        }

        // Any view model property that has a [DataType(DataType.PostalCode)] attribute, renders type=zip
        if ($("input[type='zip']").length > 0) {
            $("input[type='zip']").mask("99999?-9999", { placeholder: " " });
        }

        // @Html.EditorFor is used to render any inputs that need the html 5 type attributes.
        // But @Html.EditorFor, won't allow you to add a css class, so we do it here.
        $('input[type=text],input[type=tel],input[type=datetime],input[type=date],input[type=number],input[type=password],textarea,input[type=email],input[type=url],input[type=zip]').each(function (idx, item) {
            if (!$(item).hasClass('form-control'))
                $(item).addClass('form-control');
        });
    }
Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: