tags:

views:

425

answers:

4

First of all I will explain how I stumbled into this behavior. Within my web application I am using some custom validation for my form fields. Within the same form I have two buttons. One to actually submit the form and the other to cancel/reset the form.

Mostly I use Safari as my default browser. Now Safari 5 is out and suddenly my cancel/reset button didn't work anymore. Every time I did hit the reset button the first field in my form did get the focus. However this is the same behavior as my custom form validation. When trying it with another browser everything just worked fine. I had to be a Safari 5 problem.

I changed a bit in my Javascript code and I found out that the following line was causing the problem:

document.getElementById("somefield").required = true;

To be sure that would be really the problem I created a test scenario:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

What I expected would happen did happen. The first field "name" did get the focus automatically.

Anyone else stumbled into this?

A: 

Okay. The same time I was writing down my question one of my colleagues made me aware this is actually HTML5 behavior. See http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

Seems in HTML5 there is a new attribute "required". And Safari 5 already has an implementation for this attribute.

Joop
Damn, you answered your own question within seconds of me posting the same answer!
David Foster
Thanks to one of my colleagues indeed. This can be interesting for others I suppose?
Joop
Definitely! I'm kind of excited to see what the final HTML5 spec will have to offer on the form front.
David Foster
A: 

If I understand your question correctly, is it the fact that the required attribute appears to have default behaviour in Safari that's confusing you? If so, see: http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

required is not a custom attribute in HTML 5. It's defined in the spec, and is used in precisely the way you're presently using it.

EDIT: Well, not precisely. As ms2ger has pointed out, the required attribute is a boolean attribute, and here's what the HTML 5 spec has to say about those:

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

See: http://dev.w3.org/html5/spec/Overview.html#boolean-attribute

David Foster
And that is why we shouldn't make up custom attributes or properties on standard objects.
David Dorward
Any ideas how to turn off this for Chrome and Safari for the particular page?
Restuta
+1  A: 

Note that

<input type="text" id="car" required="true" />

is wrong, it should be one of

<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required='required' />

This is because the true value suggests that the false value will make the form control optional, which is not the case.

Ms2ger
+1. Well spotted. Surprised I missed this.
David Foster
+1  A: 

I just ran into this issue with Safari 5 and it has been an issue with Opera 10 for some time, but I never spent time to fix it. Now I need to fix it and saw your post but no solution yet on how to cancel the form. After much searching I finally found something:

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

Works on Safari 5 and Opera 10.

Darrik Spaude