Asp.net Mvc form validation bubble prompt effect display

This article mainly introduces the relevant information of Asp.net Mvc form verification bubble prompt effect in detail. It has certain reference value. Interested friends can refer to it.

The examples in this article are for everyone. Shared the production code of Asp.net Mvc form validation for your reference. The specific content is as follows

Change the form validation of ASP.NET MVC or ASP.NET Core MVC into bubble prompts:

//新建一个js文件(如:jquery.validate.Bubble.js),在所有要验证的页面引用
(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=&#39;vg&#39; id=&#39;" + vgName + "&#39;></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,微软雅黑, 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 css file (such as: jquery.validate.Bubble.css), and add all required Verified page reference
Then your form can be displayed normally without any modification (control-label related styles can be omitted (lines 1-6)).

The above is the detailed content of Asp.net Mvc form validation bubble prompt effect display. For more information, please follow other related articles on the PHP Chinese website!