Display jQuery Validation error message in Bootstrap Tooltip in ASP.Net MVC

Rockstar...

SOLVED CLOSED ACTIVE ANSWERED
User: Rockstar8
Posted: on Oct 29, 2018 04:49 AM
Forum: ASP.Net MVC
Answer: 1
Views: 15572
Sample Code: Download

Good Day,

Getting the same error message in a span on

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

Even If I use or not using the below code

https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/AdvancedDemo/Tooltip.html

Why tool tip is not displayed.

I suspect the jquery, bootstrap and jquer.validate versions that I am using

https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js

Bootstrap css - 2.3.1

@model StudentMaintanance.Models.StudentViewModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    @using (@Html.BeginForm("Contact", "Home", FormMethod.Post))
    {
        <table>
            <tr>
                <td>@Html.DisplayFor(m => m.StudentName)</td>
                <td>@Html.TextBoxFor(m => m.StudentName)</td>
                <td>@Html.ValidationMessageFor(m => m.StudentName, "", new { @class = "error" })</td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" /></td>
                <td></td>
            </tr>
        </table>
    }
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
</html>
<script type="text/javascript">
    $("form").validate({
           
      showErrors: function(errorMap, errorList) {
 
          // Clean up any tooltips for valid elements
          $.each(this.validElements(), function (index, element) {
              var $element = $(element);
 
              $element.data("title", "") // Clear the title - there is no error associated anymore
                  .removeClass("error")
                  .tooltip("destroy");
          });
 
          // Create new tooltips for invalid elements
          $.each(errorList, function (index, error) {
              var $element = $(error.element);
 
              $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
                  .data("title", error.message)
                  .addClass("error")
                  .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
          });
      },
 
      submitHandler: function(form) {
          alert("This is a valid form!");
      }
  });
</script>

As you can see I have included the script from the above link

after pasting the script from the above link I am receiving just the alert("This is a valid form!");

Thanks,

dharmend...

0 13

Reply
ANSWER
User: dharmendr
Replied: on Nov 04, 2018 10:10 AM
Modified: on May 03, 2020 09:49 AM
Report

Refer below example.

Model

public class TooltipModel
{
    [Required]
    public int? TextBox { get; set; }

    [Required]
    public string DropDownList { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

View

@model ValidationSummary_MVC.Models.TooltipModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        .error {
            color: red;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery.validate/1.11.1/jquery.validate.js"></script>
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <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>
</head>
<body>
    @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>
    }
</body>
</html>

Screenshot

Display jQuery Validation error message in Bootstrap Tooltip in ASP.Net MVC

Company

Explore

Follow us

Contact Us