Hi
https://www.aspforums.net/Threads/209217/Display-jQuery-Validation-error-message-in-Bootstrap-Tooltip-in-ASPNet-MVC/
The above answer for the requested question is working fine. But when I tried adding this page inside a _Layout it couldn't read the javascript function.
@model FullCRUDImplementationWithJquery.Models.StudentViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
.error {
color: red;
}
</style>
<div>
@using (Html.BeginForm())
{
<div class="container">
<div class="row">
@Html.LabelFor(m => m.TextBox, "A number must be entered:")
@Html.TextBoxFor(m => m.TextBox,
new
{
data_msg_number = "The field TextBox must be a number.",
data_msg_required = "The TextBox field is required.",
data_rule_number = "true",
data_rule_required = "true"
})
</div>
<div class="row">
@Html.LabelFor(m => m.DropDownList, "An option must be selected:")
@Html.DropDownListFor(m => m.DropDownList, new List<SelectListItem> {
new SelectListItem { Text = "Please select", Value = "" },
new SelectListItem { Text = "An option", Value = "An option" } },
new
{
data_msg_required = "The DropDownList field is required.",
data_rule_required = "true"
})
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$("form").validate({
showErrors: function (errorMap, errorList) {
$.each(this.validElements(), function (index, element) {
var $element = $(element);
$element.data("title", "").removeClass("error").tooltip("destroy");
});
$.each(errorList, function (index, error) {
var $element = $(error.element);
$element.tooltip("destroy").data("title", error.message).addClass("error").tooltip();
});
},
submitHandler: function (form) {
alert("This is a valid form!");
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery.validate/1.11.1/jquery.validate.js"></script>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
public ActionResult Contact()
{
return View();
}
my bundle config class
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
Am I missing out something or is the order of calling the script is wrong?
Thanks,
R
