Prevent form submissions with javascript disabled

One of the first steps in validating form data is with JavaScript. And with JavaScript disabled you are open to possible invalid input data. Of course everyone further validates the form data on the server, but that entails a round trip if errors are encountered. In many situations it is just better to prevent any form submissions from the browser itself. The following few tips will enable you to quickly disable form submission if JavaScript is disabled in the browser.

Take the below basic form. To prevent a user from submitting the form if JavaScript
is disabled, all we need to do is remove the ‘submit’ button.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

This can be accomplished by using JavaScript itself to create the button using a simple document.write method. Hence, if JavaScript is disabled in the browser, the submit button will not be created in the first place.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
 
<script type="text/javascript">
document.write('<input type="submit" value="Submit">');
</script>
<noscript>
<p style="color: red;"><b>Please enable JavaScript to submit form</b><p>
</noscript>
</form>

The other method is to disable the submit button by default, and enable it using JavaScript. Hence, if JavaScript is disabled in the browser the ‘submit’ button will remain disabled.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" id="submit" disabled="disabled" value="Submit">
</form> 
 
 
<script>
$(document).ready(function(){
    $("#submit").prop("disabled",!$("#submit").prop("disabled"))
    });
</script>

The jQuery .prop method get the property value of the ‘disabled’ attribute and just inverts it, effectively enabling the button if it is disabled.



11 thoughts on “Prevent form submissions with javascript disabled

  1. Hi Sameer. I only just found this blog the other day and this is the first post I’ve read. A suggestion: instead of using document.write(), use jQuery to append the element. Most developers seem to frown upon document.write(). Anyway, good post!

  2. Food for thought: What about when the user disables javascript after loading the page and javascript is used for page validation before posting?

  3. Just wanted to thank you for this information the examples. We’ve been getting killed from the .RU spammers and this will help a lot.

Comments are closed.