...

View Full Version : Resolved Problem submitting forms with/without javascript



chrislondon
12-19-2011, 02:44 PM
I wonder if someone can help me.

I've recently put together a new web form. The form is validated using JavaScript - it shows real-time error messages when forms are left blank, and also prevents the form from being submitted if any of the input data is invalid.

The problem I have is that if JavaScript is disabled, the form cannot be submitted. At the moment I am submitting the form using the following button




<input type="button" value="Next" onclick="submitForm(this.form);" id="button" />



The 'onclick' event runs the 'submitForm' function, which runs a final validation check and submits the form if everything checks out. If there is invalid data in the table, an alert box pops up which prevents the form from submitting.

Unfortunately, if JavaScript is disabled, the 'Next' button does nothing, as it is relying on JS to submit the form.

I have tried using <input type="submit"> as well as <button type="submit">. Both of these allow the form to be submitted if JS is disabled. Unfortunately, when JavaScript IS enabled, the validation gets bypassed - the alert box still shows up but once you click 'OK' the form gets processed anyway.

Can anyone suggest a solution? I am planning to write server-side validation in PHP as a backup but would prefer it if my JavaScript validation would work in it's entirety and the PHP simply be in place as a last line of defence for when JS is disabled.

Thanks!

Philip M
12-19-2011, 03:05 PM
You cannot have it both ways - either Javascript is enabled or it is not. If it is disabled then the validation script will not work. But in reality very few users do disable Javascript, and most people would have no idea how to go about doing so.

JavaScript form validation only provides convenience for users, not security. If for example a script verifies that the user agreed to a firm's terms of service, or filters invalid characters out of fields that should only contain numbers, the validation must also be performed server-side, and not just on the client.

Your best plan is to use <noscript> tags to inform users that they must enable Javascript in their browsers to use the form.


Why should I do anything for posterity? What has posterity ever done for me?
Groucho Marx (1890 - 1977)

Logic Ali
12-19-2011, 03:13 PM
Assuming submitForm actually returns false on error:



<input type="submit" value="Next" onclick="return submitForm(this.form);" id="button" />

chrislondon
12-19-2011, 03:51 PM
Thanks guys!

Logic Ali, that worked perfectly! Thank you!

Philip, thanks for taking the time to reply. I know the JavaScript validation will only work if JavaScript is turned on. My idea was that JS would provide help to the majority who use it by providing real time validation but also by preventing the form from being submitted if the data entered didn't conform. As for those who had JS disabled, they would hopefully be picked up by the server side validation using PHP. The only problem was the submit button - it either worked only with JS enabled OR it worked both with/without JS but bypassed the final form validation, effectively making the JS validation pointless.

Problems solved now, though. Thanks again!!

Philip M
12-19-2011, 03:57 PM
As for those who had JS disabled, they would hopefully be picked up by the server side validation using PHP.

Yes, but you said you had not yet written the PHP validation. Until that is operative you should not allow unvalidated data to be submitted.

Otherwise, people will be able to bypass your validation (and even possibly inject malicious code) simply by disabling Javascript.

chrislondon
12-19-2011, 04:25 PM
Yes, but you said you had not yet written the PHP validation. Until that is operative you should not allow unvalidated data to be submitted.

Otherwise, people will be able to bypass your validation (and even possibly inject malicious code) simply by disabling Javascript.

Aah, understood. As it happens this form will not be going live until it's 100% completed, both client and server side, but I take your point for the future. For any live forms I'll make sure that there is no way that unvalidated data can go through to the server.

Thanks again!

Chris

VIPStephan
12-19-2011, 04:58 PM
Your best plan is to use <noscript> tags to inform users that they must enable Javascript in their browsers to use the form.

Well, this is actually quite the opposite of the best plan but this isn’t the best thread to philosophize about the dos and don’ts of using JS. Just wanted to point out that server side validation must always come before client side validation. Many people are thinking of fancy enhancements way too early in the development process, before even basic functionality is ensured.

chrislondon
12-19-2011, 05:09 PM
Well, this is actually quite the opposite of the best plan but this isnít the best thread to philosophize about the dos and doníts of using JS. Just wanted to point out that server side validation must always come before client side validation. Many people are thinking of fancy enhancements way too early in the development process, before even basic functionality is ensured.

For me the order in which I'm currently doing things is simply a matter of what is/isn't within my capabilities - I've already learned the basics of Javascript, I'm currently learning PHP and putting things into practice as I go along!

I'll take the advice on board and ensure server side validation is completed first before playing with enhancements for the next time!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum