On an internal website I am using input text fields with "required" and "pattern" specified. This results in a tooltip message apparently from the browser (Chrome), saying: Please fill out this field.
By specifying my own text with "title" I can overwrite this, but I need to format the tooltip text with bold, newlines etc. For this reason I have switched to jquery ui.
Now a problem arises, because now I end up with two tooltips. The jquery ui with my text and a native tooltip from Chrome saying "Please fill out this field".
Among others I tried:
::-webkit-validation-bubble-message { display: none; }
document.getElementById("xx").setCustomValidity('')
It seems the first one is not supported anymore. And the second one I cannot get to change anything - besides it seems to just change the text, not fully remove it.
I need the validation, so I cannot remove "required" and I can also not disable validation by using novalidate or similar.
Is there really no way to get rid of this native validation tooltip?
I decided to go for a workaround instead.
Rather than adding my jquery ui tooltip on the textbox itself, I have added a span with an information mark (🛈) after it. Then added the tooltip to this span instead.
Related
Is it possible to set the validation error color on form fields manually? I couldn't really figure out how it was doing the validation on their site. Seems like the browser is doing it automatically based on the type attribute. But what CSS would I need to attach to trigger that state? I need to do a custom validation on a text field and the one that browser does automatically is not enough.
As I already wrote as a comment.
You just need to add the invalid class to your element.
Next time you could use the inspect element tool which is built-in in Chrome.
I'm using Select2 version 3.4.8 and have recently noticed that the code is adding a title attribute to each form control in my page, using the text of the associate label for the title. I assume the Select2 developers meant this as an accessibility improvement, but it is a dubious choice, as there already is an associated label.
I am looking for a way to disable this without patching select2.js directly. I've looked through the documentation and couldn't find anything. Is there a way to do this, or do I either have to patch select2.js (perhaps commenting out line 692) or write a few lines of script to remove title attributes after they've been added to .select2-container divs? (Or is this fixed in version 3.5.0?)
When loading the page add the following script:
$(".select2-selection__rendered").removeAttr('title');
This will remove the title.
The title attribute here is useless, but also harmless. It gets applied to an offscreen version of the element that has tabindex="-1". An element with tabindex="-1" cannot receive keyboard focus by default, and this will never be announced by assistive tech (unless explicitly given focus with javascript).
Only the associated label will be announced. I've verified this behavior with VoiceOver/Chrome.
I am trying to disable all text boxes on my form. One of these boxes has a typeahead on it. When I do:
$(#textbox).attr('disabled', true);
It is no longer enabled, but the color does not switch like all of the other text boxes do when they become disabled.
I believe this is due to the twitter typeahead and I am wondering if there is a way around it. Does anyone know how to override the text box background color or remove the typeahead completely when the text box is disabled?
I have tried .unbind() and .addClass("greyBackground") but neither of these seem to do the trick.
If you don't care about maintaining the typeahead.js functionality while the textarea is disabled, you can destroy the typeahead like so:
$('#textbox').typeahead('destroy');
This will reset/remove any attributes/styles typeahead.js may have added. If later on you wanted to add back the typeahead.js functionality, you could reinitialize it with:
$('#textbox').typeahead({ /* configs */ });
Also, typeahead.js doesn't support textarea elements out of the box, so unless you're using a forked version, you shouldn't assume typeahead.js will work as expected.
In Bootstrap 2.2.2 there is no .typeahead('destroy') function, so the following does remove all the listeners it was previously bound to and the DOM element it has created.
$('#textbox').off()
.data('typeahead')
.$menu
.off()
.remove();
Today I read some posts about the 'autocomplete' browser generated in the text fields, and i was wondering if it's possible to manipulate those results with jQuery, like highlight some part of the results or change the bg color (not that yellow one) or something like that.
I'm not talking about any plug-in 'autocomplete'.
Here's a example of what I'm talking about (Double click inside the text input and probably will show up some 'emails')
The browser handles that auto complete. Your page can't edit it. I for example, have it disabled so I don't see anything in the drop down list.
Sort of related:
You can disable it by adding the autocomplete="off" property to the input element.
On the "Ask Question" page, the text in the Title box says "What's your programming question? be specific.". When you click on it, the text remains, but when you type anything it goes away.
How is this implemented? I'm looking through the script and failing to find the code that hides this overlay text.
You could use the onkeydown method. Check to see if the current text is equal to the default text and if so get rid of it. Then use the onkeyup method to check to see if the field is empty and set back to default.
Watermark is a very nice jquery plugin that handles this for you. It will also intercept form posts and remove the watermark text if nothing has been entered which aids validation and submission.
If you prefer not to use jquery you can find a javascript/css only solution at http://www.codeproject.com/KB/aspnet/WatermarkTextBox.aspx