Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem submitting forms with/without javascript

    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

    Code:
    <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!
    Last edited by chrislondon; 12-19-2011 at 03:52 PM. Reason: Problem solved

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Assuming submitForm actually returns false on error:
    Code:
    <input type="submit" value="Next" onclick="return submitForm(this.form);" id="button" />

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by chrislondon View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Quote Originally Posted by Philip M View Post
    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.

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •