Asp.net MVC form validation bubble prompt effect

Time:2021-4-29

This example for you to share the asp.net MVC form verification code, for your reference, the specific content is as follows

Change the form verification of asp.net MVC or asp.net core MVC to bubble prompt:

//Create a new JS file (such as: jQuery. Validate. Bubble. JS) and reference it on all pages to be verified
(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 + "'></div>").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 YaHei, 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) and reference it on all pages to be verified
Then your form can be displayed normally without any modification (control label related styles can be omitted (1-6 lines))

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.