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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Javascript form validation when submit button is pressed?

    Hello all

    I created a form which has a lot of textboxes, checkboxes and select-lists which are getting filled up by the records from a database table. I am basically creating an edit screen for a record.

    No I want to check all these input elements using javascript validation. I want this to performed when a button "Archive" is pressed.

    My problem is this "Archive button" needs to be a submit button. This does run the javascript validation but after completing the validation it submits the form. I want that submission should be stopped when the validation is violated. how can I do this?

    What I want is a button which acts as a default button (triggers the onclick event when I press enter) but submits only if the form is valid.

  • #2
    New Coder
    Join Date
    Nov 2008
    Location
    New Delhi,India
    Posts
    26
    Thanks
    1
    Thanked 3 Times in 3 Posts
    place an onsubmit on your form element
    Code:
    <form action="" onsubmit="return checkSubmit();">
    and in your javascript
    Code:
    function checkSubmit()
    {
    	if (all validations are ok)
            {
                return true;
            }
            else
            {
                return false;
            }
    }
    Note that onsubmit="return checkSubmit();" not onsubmit="checkSubmit();"

    --
    Vijay
    http://vijayjoshi.org

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    below is an example of setting a value to the submit button instead of creating a button that will submit.

    Code:
    <html>
    <head>
    <script type=text/javascript>
    function valid(){
    if(document.getElementById('t1').value.toString().length>=1){return true;}
    else{return false;}
    }
    </script>
    </head>
    <body>
    <form action='' onsubmit="return valid();">
    <input type=text id=t1><br>
    <input type=submit value="Archive">
    </form>
    </body>
    </html>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #4
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can u please explain the difference between "return checkSubmit() and "checkSubmit()"?? Please explain what is happening in both cases.

    Thanks in advance


    Quote Originally Posted by v08i View Post
    place an onsubmit on your form element
    Code:
    <form action="" onsubmit="return checkSubmit();">
    and in your javascript
    Code:
    function checkSubmit()
    {
    	if (all validations are ok)
            {
                return true;
            }
            else
            {
                return false;
            }
    }
    Note that onsubmit="return checkSubmit();" not onsubmit="checkSubmit();"

    --
    Vijay
    http://vijayjoshi.org

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    It is not a good idea to revive ancient threads - better to start a new thread of your own.

    The name of the function is checkSubmit(). It returns true or false depending on the result of the validation.
    It may be called in an onsubmit handler with onsubmit = checkSubmit().
    That will cause the function checkSubmit to run when the form is submitted.

    However, it is not enough to simply run the function as the form will submit regardless of whether the validation passed or failed. We need to use onsubmit = return checksubmit() to return the result of the function - true or false. If false is returned then the submit is cancelled. If true is returned then the submit takes place. OK?

    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.


  •  

    Posting Permissions

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