605277 - Do not show the error message in the tooltip if title is set

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Alexander Farkas]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; de; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; de; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10

If a form with candidates for constraint validation is generated, there are appearing tooltips with some hints, explaining the constraints of this input. Although they are quite usefull, there should be a way to turn them off.

Either by using the title-attribute or by setting a pseudo-element to display none (::constraint-hint {display: none;}.

Reproducible: Always

Steps to Reproduce:
Use nightly build of Firefox/Minefield (Firefox 4beta7)
1. Create <input required title="" name="test">
2. Hover over element
Actual Results:  
A validation hint appears

Expected Results:  
The validation message should not appear. (Should be "overriden" by the title attribute).

Showing a info bubble, not only on invalid-event (wich is cancelable), but also on mouseover is usefull extension to the specification. But it is an extension and Mozilla is the first browser, with this approach.

Especially, if a developer want's to change the way, the user is informed about the constraints (through creating an info-icon next to the form element) or want's to create custom (i18n)-messages (setCustomValidity is nice, but isn't the right tool to achieve this), he needs a way to disable this feature.

By the way: I'm currenty playing a lot with the constraint validation API and although, you are only supporting a small part (no type=number, type=date etc.). Your implementation is the best/most accurate implementation. 

nice work.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Mounir, is there a way to do this already?

And I think the last part of comment 0 is something you should read.  ;)

Comment 2

[Mounir Lamouri (:mounir)]

I'm not sure I understand what you really want:
 1. disable the message when you think it's not relevant ;
 2. or change the message

You already can do (2) with x-moz-errormessage (available in nightlies and next beta (7)) attribute or .setCustomValidity().
For (1), I'm not sure I understand what are the use cases.

The idea of this tooltip is when a form control is invalid, the user might want to know why. The tooltip might prevent the user to submit the form only to know what's happening.

I guess we could only show the tooltip when :-moz-ui-invalid applies (see bug 605124) and also prevent showing it when novalidate is set on the form element.

Comment 3

[Alexander Farkas]

First of all: I haven't checked the x-moz-errormessage attribute yet. So I can't decide, wether this would be a good workaround. But it looks extremly ugly.

There are two main usecases, neither :moz-ui-invalid nor novalidate would fit for this:

Usecase for 1. "disable the message when you think it's not relevant":

First I often have to implement validation on top of very detailed concept. This means a concept could specify:

"If an input-element has a constraint, there is an info icon next to the element explaining the constraints to the user on hover."

A quick and dirty implementation would look like this:

<form>
	<label for="name">Name</label>
	<input required id="name" name="name">
	<span class="hint-icon" title="The name input is required. Please fill out"></span>
</form>

It would be a violation of the concept, if the input itself shows also a tooltip. In this case: I have to remove HTML5 form validation and have to implement this features going old school.

The second thing has to to with 2. "changing the validation message" (and changing the look and feel of the constraint validation):

The setCustomValidity-API is a really bad method for changing the only the validation-message. This is why:

1. setCustomValidity works only on a single element. If I want to change the validationMessage for required inputs. I have to go through all required inputs and set the validationMessage.
2. setCustomValidity does not only change the validationMessage, it also sets the customError-flag to true. This means, if I only wanted to change the message for required elements. I have to dynamically remove my custom validation message, if the input is not empty anymore. 


This means a lot of code to only change the validation message.

In contrast, in the current implementation of Opera, it is really simple to change the validation message using only the methods defined in the standard (because, they don't show a validation hint on hover). Here is the JS-Code:

<script>
	document.getElementsByTagName("form")[0].addEventListener("invalid", function(e){
		//stop appearing browser validation message
		e.preventDefault();
		//implement customValidation bubble and custom validation message for e.target.validity
	}, true);
</script>

This said, I think a custom event like [on]mozinvalidhint, wich can be prevented would be a great extension.

Hope my point is now much clearer. I hope, that you understand my problems here, they are extremly important.

Comment 4

[Mounir Lamouri (:mounir)]

Alexander, if we don't show a validation hint when the title attribute is set, would that be better for you?

Comment 5

[Alexander Farkas]

Yes this would be an suitable solution. Thanks.

Comment 6

[Mounir Lamouri (:mounir)]

Attachment: Patch v1

If title is set (even to the empty string), the tooltip will not show the error message but the title value (or nothing if the title value is the empty string.

For approval: this is a minor change with no risks that is doing some polish to a feature.

Comment 7

[Mounir Lamouri (:mounir)]

Attachment: Patch v1

Comment 8

[Jonas Sicking (:sicking) No longer reading bugmail consistently]

Comment on attachment 490580 [details] [diff] [review]
Patch v1

>diff --git a/embedding/browser/webBrowser/nsDocShellTreeOwner.cpp b/embedding/browser/webBrowser/nsDocShellTreeOwner.cpp
...
>   if (cvElement) {
>-    cvElement->GetValidationMessage(outText);
>-    found = !outText.IsEmpty();
>+    nsCOMPtr<nsIDOMElement> content = do_QueryInterface(cvElement);
>+    PRBool hasTitle = PR_FALSE;
>+    content->HasAttribute(NS_LITERAL_STRING("title"), &hasTitle);
>+
>+    if (!hasTitle) {
>+      cvElement->GetValidationMessage(outText);
>+      found = !outText.IsEmpty();
>+    }

QI to nsIContent and use HasAttr instead.

r=me with that changed.

Comment 9

[Mounir Lamouri (:mounir)]

Pushed:
http://hg.mozilla.org/mozilla-central/rev/344597f66c3e

I think this is fixing the bug. Alexander, if there is another issue, feel free to open a new bug and add me in CC.

Setting dev-doc-needed so we can tell the web authors they can deactivate the tooltip showing the error message by setting title="".

Comment 10

[Eric Shepherd [:sheppy]]

Documented here:

https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5#Constraint_Validation

Comment 11

[John]

Hello. This seemingly no longer works, so I think this bug is relevant again.
Setting title="" or title=" " inside an input-element does NOT deactivate the validation messages anymore.
Please reopen. Thank you.

Comment 12

[Andrew McCreight [:mccr8]]

Please file a new bug if you are seeing a similar issue.