Don't submit form unless JavaScript is enabled

Question

I have a basic form that I'm using for member registration. I'm using the form onsubmit event to populate a hidden form field based on some of the form's fields. It's working great, but I'd like to prevent the form from submitting if javascript is NOT enabled. This will ensure that the hidden field gets properly populated on the clients machine.

I realize it's probably best practice to support registration without javascript enabled, but I'd like to run with the current solution I have in place

<form id='member_form' method="post" action="http://www.mysite.com/" onsubmit="build_username();" >

Answer 1

Why not just hide the submit button by default and show it with JavaScript? That won't stop a user from submitting the form by pressing the enter key, but it will trim the numbers. You can also show a message with a NOSCRIPT html element telling users to enable JavaScript.

Answer 2

One way to do it would be to have a hidden field defaulted to something like hunter2, and then when the form gets submitted, have javascript change it to something else. Then you can know if the user had javascript enabled.

Answer 3

Just get rid of any <input type="submit"> or <input type="image"> and replace them with buttons/images that trigger form submission using JavaScript. If there are no controls which trigger submission when JavaScript is disabled, you'll be reasonably sure that submission was from JavaScript. Keep in mind that clever users, broken browsers, and other weirdness will ensure that corrupt or invalid data gets submitted anyway.

Answer 4

Hiding the submit button won't work because the browser will try to submit the form if you press enter in an input type="text".

What you might want to try is adding the form element via JavaScript (i.e. don't have it in your HTML).

Answer 5

The problem is that a form is submittable by default.

You can't take away the form's action attribute and add it later using JavaScript, because the browser will then use the current page as action, and the form can still be submitted.

Also, removing the "submit" button doesn't help, as the form still can be submitted using the enter key.

But, I submit to you (pun not intended!) this evil idea:

<form action="#">
  ....
</form>

this makes the form virtually unsubmittable at first, as the submission target is the current page.

You would then set the correct action attribute using JavaScript.

I can't think of any reason why this wouldn't work reliably across browsers, except that trying to submit it will make the browser jump to the top of the page because of the hash #.

Answer 6

If they need javascript to submit the form, then there's no point of even showing them the form.

In light of that, I'd recommend something like this

<noscript>
  You cannot register without javascript enabled.
</noscript>

<form id="registration" style="display: none">
  <!-- form stuff here -->
</form>

<script type="text/javascript">
  document.getElementById( 'registration' ).style.display = 'block';
</script>

It's a bit cheesy and a hack, but then so is requiring javascript for a simple web form.