MVC Tooltip Validation using jQuery and Bootstrap


Check the Sample Code Github

Me and Ahmad Aqrabawi created a simple jQuery plugin to convert MVC Validation to a Boostrap tooltip validation error.

When you create a form; Validation Errors could change in the layout when its appear and may messed up the your layout .. So its error tooltips could be useful sometimes.
Simply, create new MVC project and navigate to “Register View” .. Add a validation message from Html helper directly after the text box

@Html.TextBoxFor(m => m.UserName, new { @class = “form-control” })

@Html.ValidationMessageFor(m => m.UserName)

Same thing for the other fields.

@section Scripts {

@Scripts.Render(“~/bundles/jqueryval”)

<script>

$(function () {

$(“form input”).tooltipValidation();

});

</script>

}

Also you can add placement option (by default its top)

$(“form input”).tooltipValidation({

placement: “right”

});

One more thing … your tooltips will appear in black colour now. If you to make it in red add this file

<link href=”~/Content/jquery.validate.mvc.css” rel=”stylesheet” />

 

Check the Sample Code Github

Advertisements

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