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.
Idea: you can also don’t use a submit button, just a regular button. When the data is valid the javascript can submit the form.
And how would this prevent form submission by pressing enter in one of the fields?
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!
Try it actually with the above code.
i use better way; i use DIV instead of FORM html tag!
then with jQuery i convert the DIV to FORM tag 🙂
one of this method benefit is that spammer robots dont see any form in your page 😉
Cool ideas people, just shows how social conversations can bring out good ideas.
Like your idea,really useful! 🙂
Wow! This is a very smart idea! This would be viable for other applications too, like special functionality and animations. Great contribution
Food for thought: What about when the user disables javascript after loading the page and javascript is used for page validation before posting?
Thank you that is by far the smartest idea I have found on the internet for this issue!!
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.