Inline Style ASP.NET MVC Validation Message

ASP.NET MVC provides a cool way to add client-side validation for create/edit view, only one thing is defective for me.  I used a lot of "table-layout editor” UI in my web projects, like the snapshot below, and the validation messages will be appended to the <input> by default.  It means that the appearance of validation messages will definitely increase the width or height of table cell, then change the layout of editor.

Before migrating to ASP.NET MVC, I was using Position: Absolute’s jQuery Inline Form Validation to solve the layout issue of validation messages.

Now, it’s time to use the same idea in ASP.NET MVC.

Extracting part of script from Inline Form Validation Engine plugin, I created a small plugin to make ASP.NET MVC 3 client validation messages displayed "inline".  It’s quite easy to use: include jquery.validate.inline.js and validationEngine.jquery.css, then add one line script $(“form”).makeValidationInline(), that’s all!

<script src="@Url.Content("~/Scripts/jquery.validate.inline.js")" 
        type="text/javascript"></script>
<link href="@Url.Content("~/Content/validationEngine.jquery.css")" 
      rel="Stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("form").makeValidationInline();
    });
</script>

After adding the little extra script to Create.cshtml, the validation messages will prompt in the upper-right corner and no more break my table layout.

You can download the package from NuGet gallery now and any feedback is welcome.

歡迎推文分享:
Published 03 July 2011 11:40 PM 由 Jeffrey
Views: 32,199



意見

# Lauri said on 24 September, 2011 09:25 AM

Thanks! Very nice solution!

# Tom said on 16 March, 2012 11:49 AM

which name about the program is in the Nuget gallery ?

# Jeffrey said on 16 March, 2012 06:28 PM

to Tom, you can use the "NuGet gallery" link at the end of post to navigate to the plugin detail page in NuGet website. (www.nuget.org/.../AspNetMvcInlineValidation)

# Aleksandar said on 13 September, 2012 09:13 AM

Thanks a lot for this.

# wizardnet said on 07 November, 2012 08:50 AM

Your plugin is awesome. One useful addition, at least for me, would be to have the possibility of displaying the message only for the focused or hovered control, could this be added easily?

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<July 2011>
SunMonTueWedThuFriSat
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication