.

Tuesday, March 14, 2006

never rely on JavaScript #

After my post on thelist I have received several off-list questions asking

What would you recommend, instead of disabling form's default submit behavior,
so that only the submit button will submit the form?


in one way or in another.

Although, I am sure Christian has much more to say I have a few words to say anyway.

So what can you do to disable form auto-submitting when pressing enter on a form field.
Actually nothing other than the solution I've proposed apriori (using onsubmit="return false;" in the form tag).

Here is why I do not recommend it:

Submitting form on pressing enter on an input field is the default behavior and it is useful in terms of accessibility. By adding onsubmit="return false;"

  1. You override the behavior which is an accessibility disaster (that's why I do not recommend it).
  2. You cannot be 100% sure (user may disable javascript or simply type javascript:document.forms[0].submit(); on the addressbar, both of which will submit the form, regardless of which control you put in the form, none the less)

Javascript is to enhance functionality, it is not to create functionality, nor can it be used to impose "so called" security controls to your web application.

Any kind of javascript security control can be easily bypassed by
  1. Either disabling javascript
  2. or using javascript: pseudoprotocol on the addressbar and calling your js function directly (as in javascript:document.forms[0].submit();
  3. or using a developer toolbar and injecting your own js into the code (mozilla is excellent on this)
  4. or writing a low-level application which gets and posts http requests and never messes with javascript at all.
These are what come to my mind immediately.

I am sure there are dozens of other ways around and hundreds of readily cooked hacker tools
to make these possible even to the novice to alter the http request with a few button clicks.

So what is the the ideal way of doing it?

I hear you say "Come and do it yourself then, I have deadlines and I am feeling my client's / boss' breath on the nape of my neck".

You're right from a certain point of view: It will help you save a day or two, at a cost of never-ending future nightmares.

If you think this won't affect you at all ("bana bişey olmaz abi") then do not spare your precious time and read the rest of this post -- just enjoy your way to the dark side :)

So coming back to my former question, "what is the ideal way of doing it?":

Actually it's dead obvious and simple:

1. First of all, disable your Javascript

As I mentioned above Javascript should be used to enhance functionality,
not to implement it.

Thus the first and immediate thing you should do is to disable javascript, post your form and
validate everything on server.

If server-side validation fails, redirect the user to the same page with a message explaining what has gone wrong.

(Hell No!!! when I say message, I never for ever mean, a Javascript alert or worse a pop-up,
embed your message directly into the page and preferably highlight the erroneous fields with css)

2. After making sure that everthing works """without""" JavaScript, enable JavaScript
and implement whatever client-side control you wish to do
.

This may seem duplicating your development time but it can save you hours on the long run.

Of course, if you like having stomachaches once a week because you cannot wonder how on earth that bloody user entered those god-damn invalid data into the form, then that's your choice.

I don't know you, but I have better things to do like eating, sleeping...

 bu yaziyi sevdin mi?  hemen una ekle!
 


5 Coments

Anonymous said...
This post has been removed by a blog administrator.
11:17 AM  
Anonymous said...
Spelling is hardly the issue here

Excellent post and a point well made. I use JS in forms to provide information for the user before submission. If they choose to disable JS then that's their loss, true validation happens on the server
12:12 PM  
Chris Heilmann said...
It is not necessarily double maintenance, if you keep the validation logic in the PHP and re-use it in JavaScript (for example via JSON) then you can keep the logic rules in one place and use both client and server side validation. That is how the HTML quickform class of PHP pear does it. I will also have an example in my upcoming book.

As for the fixing of the enter button problem, you can also check the keycode onkeypress and other evil things.

I only encountered that problem with .NET so far which in its amazing cleverness only allows for one form per page (in .NET 1.1)
1:39 AM  
Brent said...
This is actually the second time I've run across this entry, and I agreed with it the first time, but now I'm not so sure.

I'm in a situation where I'm being asked to disable enter on a form only under a particular circumstance. Briefly, I have a drop-down search results box, a la Google Suggest, and the powers that be want the enter key to select an option from that box, rather than attempt to submit the form. I think this is a reasonable request. The points you bring up about not using Javascript for security are completely valid, but there are cases where we might want to modify the default behavior for non-security related reasons. These ought to be taken into account.

I also want to add that this form does degrade gracefully, and that accessibility is not compromised in this scenario, because enter is only disabled while the user is performing a specific task (selected an option from the menu).
9:38 PM  
Volkan Ozcelik said...
Brent,

that's exactly what I mean.

Javascript is to enhance functionality. And by giving enter key an alternative function *only for* a particular element, you enhance the way user interacts with your form.

Moreover, you have also made sure that the form works equally well without JavaScript.

So you are not obstructing anything. You are enhancing a form element on the contrary.

Modifying the default behaviour, or modifying anything for that matter, is not bad if you know what you are doing and if you have a valid and reasonable explanation for it.

Which leads us to another discussion
that you should not be a standards blind

Also here is a follow up to the above link
10:00 AM  


Post a Comment

Links to this post:


Create a Link

<< Home




Recent Posts

RSS

RSS register icon

Other Blogs

Various

Sponsor

Profile Information

Browser I Suggest

Sponsor

Dikkatimi Çekenler