Menu
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> <input type="text" id="name" required="true" /><br/> <label>Car:</label> <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?
405
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
If you put required on a radio button, one radio button of the same named group of radio buttons will be required, though not necessarily the one with the required attribute on it. On checkboxes, each individual checkbox with the required attribute is required, and must be checked.
Reasons Why HTML Required Not Working. As per the general rule, any HTML form control with the required attribute must have a value for successful submission. So if there is any field with a null value, it will prevent the form from being submitted in browsers that support constraint validation.
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.
186
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
