ASP. NET MVC form validation bubble tip effect Display

This article is mainly for you to introduce the ASP. NET MVC form validation bubble hint effect of the relevant data, with a certain reference value, interested in small partners can refer to

The example of this article for everyone to share the ASP. NET MVC form validation of the production code for your reference, the specific content as follows

Change the form validation for ASP. NET MVC or ASP. NET Core mvc to a bubble tip:

Create a new JS file (for example: Jquery.validate.Bubble.js), on all page references to validate (function ($) {    $ ("form. Field-validation-valid,form"). Field-validation-error ")  . each (function () {    var tip = $ (this);    var fname = tip.attr ("data-valmsg-for");    var input = $ ("#" + fname);    var vgname = "VG" + fname;    $ ("<span class= ' vg ' id= '" + vgname + "' ></p>"). InsertBefore (input);    Input.appendto ("#" + vgname);    Tip.appendto ("#" + Vgname);})      (JQuery);

. control-label {display:block; text-align:left;}      @media (min-width:768px) {. control-label {display:inline-block;min-width:75px; text-align:right; }}.VG {display:block; position:relative; overflow:visible;}. VG. Form-control{display:block;max-width:inherit;} @media (min-width:768px) {. VG {display:inline-block;}}. vg. field-validation-error {position:absolute; bottom: 101%; min-height:30px; z-index:999;    right:0px; Background: #ff0000; Color: #FFFFFF; padding:0px;    BORDER:7PX solid #ff0000; Border-radius:0.7em; font-size:9pt;    font-family: "Helvetica Neue", Helvetica, Microsoft Jas Black, Arial, Sans-serif; Max-height:3.7em; overflow:visible; Text-overflow:ellipsis; Line-height:1.3em;  opacity:0.7; }.vg. field-validation-error::after {content: ""; Position:absolute; width:1px; height:1px; BORDER:14PX solid blue;      Border-color:transparent; Border-top-color: #ff0000; Display:block; overflow:visible; top:100%; right:0px;}

//Create a new CSS file (such as: JQUERY.VALIDATE.BUBBLE.CSS), on all page references to validate
and your form will display normally without any changes (Control-label related styles can be done (1-6 lines) ).