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