[whatwg] Form element invalid message

Wed Sep 22 18:18:26 PDT 2010

On Wed, Sep 22, 2010 at 5:50 PM, Mounir Lamouri
<mounir.lamouri at gmail.com> wrote:
> On 09/22/2010 02:51 PM, Aryeh Gregor wrote:
>> data:text/html,<!doctype html><form><input name=x required
>> oninvalid="this.setCustomValidity(''); if (!this.validity.valid)
>> this.setCustomValidity('abcd')"> <input type=submit></form>
>>
>> In a Firefox 4 nightly, when I click the submit button, the error is
>> just the string "abcd".  In Opera it's worse -- "The value  is not
>> allowed by a script on the page! abcd" (visible double space after
>> "value", due to inserting the string unquoted) -- but the Opera UI
>> here is really bad in many ways, as noted, and is likely to improve as
>> other browsers implement good UIs.  Note that Firefox is buggy here
>> and treats setCustomValidity('') as setting the error message to ''
>> instead of removing it, as the spec says, but when that's fixed it
>> will work.
>
> I don't think there is a bug in Gecko. For what I understand, the bug is
> in Presto if the behavior is what you describe.
> According to the specifications [1], when the submission is requested
> and there are invalid form elements, the form submission should be
> canceled. If one element do not cancel the invalid event, the UA should
> use it's own interface to explain what's happening. In all cases, the
> form submission will be canceled.
>
> So, what you do is making the element valid in the invalid event which
> is too late. After the invalid event, Firefox tries to show the UI using
> the validationMessage which return the empty string when the form is
> valid. You should cancel the event if you want to have no UI at all but
> still cancel the submission. You should use onchange/oninput to change
> the validity state if you want the form to be submitted.
>
> And, FTR, I think I do not think it's a good think to use
> setCustomValidity() _only_ to put your own message in there. This should
> be used when the validity rule isn't one of those specified. For
> example, if you want two password fields to be the same, you can use
> setCustomValidity() because there is no way to specify that with the
> current constraint validation API.
> I don't think people should promote the use of setCustomValidity() to
> override a pre-defined message with a more custom one like changing
> "Please fill this field." by "Please, set a username.". But that's just
> an opinion...
>
> [1]
> http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#interactively-validate-the-constraints

I agree with what Mounir says. I think using setCustomValidity to
override the error message that the page displays is an abuse of API.

However I do think it is an interesting use case to be able to use the
browser UI to display a custom error message. Consider

<input type=email name=username required maxlength="100">

If the user leaves this empty, firefox will (in beta7) display the
message "Please fill out this field.". And if the user enters
something that isn't a valid email address, we'll display the message
"Please enter an email address.". But if the user types an email
address longer than 100 characters, we'll display the message "Please
shorten this text to 100 characters or less (you are currently using
105 characters)"

However for the former situation, the website might want to use the
message "Please choose a user name", and for the latter "Your user
name must be a valid email address, we use this to contact you when we
have product updates".

One way to do this would be to make the "invalid" event implement an
interface with a function like setCustomErrorMessage(in DOMString
message). This string would then be displayed by the UA in its UI
wherever it displays validation error messages.

I actually think that the customerrormessage attribute that has been
suggested is a decent solution too. It does mean that you have to do
some trickery if you want to display different error messages for
different types of errors, but nothing too bad. All you'd need to do
is install an event handler for the "invalid" event, and in that
handler do something like element.setAttribute("customerrormessage",
myMessage);

/ Jonas