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.


Comments

# by Lauri

Thanks! Very nice solution!

# by Tom

which name about the program is in the Nuget gallery ?

# by Jeffrey

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

# by Aleksandar

Thanks a lot for this.

# by wizardnet

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?

Post a comment