required error tooltip style

Question

User818337214 posted

Hi,

how can I get css  code for 'required error tooltip style' 

I mean this picture tooltip 'Please fill in this field'.

Also 

I need to set this error message for language - localization 

Answer 1

User-1038772411 posted

Hello, suat_suphi

You can not change "default tooltip" (HTML5 validation bubble) - it is determinated by browser vendor and several other params like browser language.

Do something like below :

<input placeholder="Lorem ipsum..." required oninvalid="myCustomFunction()" />

Reference link :

https://stackoverflow.com/questions/38930221/styling-default-validation-tooltip

Thanks

Answer 2

User711641945 posted

Hi suat_suphi,

If you use asp.net core and want to localize the error message.I suggest that you could add [Required] attribute on server to show the error message like below instead of using Html5 Built-in form validation:

1.Model：

 public class Test
{
     [Required]
     public string FullName { get; set; }
}

2.View：

@model Test
<form asp-action="Create">
     <div class="form-group">
           <label asp-for="FullName" class="control-label"></label>
           <input asp-for="FullName" class="form-control" />
           <span asp-validation-for="FullName" class="text-danger"></span>
     </div>
     <div class="form-group">
           <input type="submit" value="Create" class="btn btn-default" />
     </div>
</form>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

And you could localize ASP.NET Core model binding error messages, follow these steps:

1.Create Resource File: right-click solution to new folder named 'Resources' and name the resource file.

2.Edit the .resx file: set the corresponding name and value.

3.Configure Options in Startup.cs: configure its options to set message accessors for ModelBindingMessageProvider

More details you could refer to ASP.NET Core Model Binding Error Messages Localization

Best Regards,

Rena

Answer 3

User818337214 posted

More details you could refer to ASP.NET Core Model Binding Error Messages Localization

thank you Rena Ni,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/jquery-validate.bootstrap-tooltip.min.js"></script>

I use this... I mean when I use required, I get an error message that's 'Please fill in this field'.

If I use just required in input for email, there is a recommendation and tooltip style. I want to get this style

Answer 4

User818337214 posted

How can I change tool tip style 

/**
 * @preserve
 * jQuery Validation Bootstrap Tooltip extention v0.10.2
 *
 * https://github.com/Thrilleratplay/jQuery-Validation-Bootstrap-tooltip
 *
 * Copyright 2016 Tom Hiller
 * Released under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 */
! function (a) {
    var b = 0,
        c = 0;
    a.extend(!0, a.validator, {
        prototype: {
            defaultShowErrors: function () {
                var d = this,
                    e = a.fn.tooltip.Constructor.VERSION;
                e && (e = e.split("."), b = parseInt(e[0]), c = parseInt(e[1])), a.each(this.errorList, function (e, f) {
                    if (3 === b && c >= 3) {
                        var g = a(f.element);
                        void 0 !== g.data("bs.tooltip") ? g.data("bs.tooltip").options.title = f.message : g.tooltip(d.applyTooltipOptions(f.element, f.message)), a(f.element).removeClass(d.settings.validClass).addClass(d.settings.errorClass).tooltip("show");
                    } else a(f.element).removeClass(d.settings.validClass).addClass(d.settings.errorClass).tooltip(4 === b ? "dispose" : "destroy").tooltip(d.applyTooltipOptions(f.element, f.message)).tooltip("show");
                    d.settings.highlight && d.settings.highlight.call(d, f.element, d.settings.errorClass, d.settings.validClass);
                }), a.each(d.validElements(), function (c, e) {
                    a(e).removeClass(d.settings.errorClass).addClass(d.settings.validClass).tooltip(4 === b ? "dispose" : "destroy"), d.settings.unhighlight && d.settings.unhighlight.call(d, e, d.settings.errorClass, d.settings.validClass);
                });
            },
            applyTooltipOptions: function (c, d) {
                var e;
                e = 4 === b ? a.fn.tooltip.Constructor.Default : 3 === b ? a.fn.tooltip.Constructor.DEFAULTS : a.fn.tooltip.defaults;
                var f = {
                    animation: a(c).data("animation") || e.animation,
                    html: a(c).data("html") || e.html,
                    placement: a(c).data("placement") || e.placement,
                    selector: a(c).data("selector") || e.selector,
                    title: a(c).attr("title") || d,
                    trigger: a.trim("manual " + (a(c).data("trigger") || "")),
                    delay: a(c).data("delay") || e.delay,
                    container: a(c).data("container") || e.container
                };
                return this.settings.tooltip_options && this.settings.tooltip_options[c.name] && a.extend(f, this.settings.tooltip_options[c.name]), this.settings.tooltip_options && this.settings.tooltip_options._all_ && a.extend(f, this.settings.tooltip_options._all_), f;
            }
        }
    });
}(jQuery);

Answer 5

User475983607 posted

How can I change tool tip style 

You are showing an HTML 5 form validation message.  Use HTML 5 form validation if that's what you want.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Answer 6

User818337214 posted

mgebhard

suat_suphi

How can I change tool tip style 

You are showing an HTML 5 form validation message.  Use HTML 5 form validation if that's what you want.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

thank you mgebhard

<div class="form-group input-group">
    <input asp-for="Input.Email" class="form-control" type="email" required placeholder="@Html.DisplayNameFor(model => model.Input.Email)">
    <span class="input-group-addon"><i class="icon-mail"></i></span>
    @*<span asp-validation-for="Input.Email" class="text-danger"></span>*@
</div>

if I use just required, I can see HTML 5 form validation message 

        public class InputModel
        {
            [Required(ErrorMessage = "EmailRequiredError")]
            [EmailAddress(ErrorMessage = "EmailFormatError")]
            [Display(Name = "Email")]
            public string Email { get; set; }

            [Required(ErrorMessage = "PasswordRequiredError")]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [Display(Name = "LoginRememberMe")]
            public bool RememberMe { get; set; }
        }

How to show my error message in HTML 5 form validation message automatically.

I mean [Required(ErrorMessage = "EmailRequiredError")]  and [EmailAddress(ErrorMessage = "EmailFormatError")]

or 

how to convert this code (thats I shared - jQuery Validation Bootstrap Tooltip extention v0.10.2) with html 5 form validation tooltip 

Answer 7

User475983607 posted

How to show my error message in HTML 5 form validation message automatically.
I mean [Required(ErrorMessage = "EmailRequiredError")]  and [EmailAddress(ErrorMessage = "EmailFormatError")]
or 
how to convert this code (thats I shared - jQuery Validation Bootstrap Tooltip extention v0.10.2) with html 5 form validation tooltip 

First, decide on a validation framework; jQuery validation or HTML 5.  

Secondly, it helps to read the linked documentation.  

Answer 8

User818337214 posted

thank you again

I guess I need to get html5 validation tooltip css style 

I just want to use this tooltip style 

Answer 9

User475983607 posted

I guess I need to get html5 validation tooltip css style 

I just want to use this tooltip style 

HTML 5 validation is a browser API and each browser can implement the UI a bit differently.   This information is openly and clearly published in the link I provided in my first post. 

If you want the UI that chrome provides, then I recommend you do a Google search for a style that fits your needs.  I feel it is unreasonable to ask the community to search for a solution unless you are willing to share your fee.

Answer 10

User818337214 posted

I feel it is unreasonable to ask the community to search for a solution unless you are willing to share your fee. 

I cant understand you what you mean? my English is not good. what did you mean? fee? I hate capitalism. property is theft. if you believe a god, you have such a belief. Don't worry  I don't believe it... :) 

my solution : I changed it that jQuery Validation Bootstrap Tooltip 

placement: "bottom" || e.placement,

this is about tooltip position in my template 

<style>

.tooltip .arrow {
left: 5% !important;
}
.tooltip {
left: -2% !important;
}
.tooltip-inner {
background-color: #0da9ef !important;
width: 200px !important;
left: -2% !important;
color: white !important;
text-align: left;
}
.tooltip .arrow:before {
border-bottom-color: #0da9ef !important;
margin-bottom: -1px;
}

</style>