What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Can you set validation to only run after submit

    Asked by xcitemedia on June 07, 2011 at 11:29 AM

    Hello,

    I was wondering if you can set the validation to run only after the submit button is clicked, not when you go to the next input field.

    Is there any way to accomplish this?

    Your help is greatly appreciated.

    Derek

    derek@xcitemediagroup.com

    Page URL:
    http://rootertown.com/colorado-springs/

  • Profile Image
    JotForm Support

    Answered by liyam on June 07, 2011 at 12:59 PM

    Hello Derek,

    Thank you for posting your inqury.

    This is possible but not within Jotform's features.  This can be done if you are to embed the source of your form on your own webpage and do some little javascript coding.  But once you consider this, you will no longer use the error warnings used in jotform.  You will use something else, or the most common would be the alert window prompts for your error warnings.

    Here's a sample form that I have made, replicating your form with the same values but using a custom validation script:

    http://ravnos.t35.com/javascriptvalidationform.html

    If you're interested on using this, just let me know and I will help you fix your form using this type of error alerts.

    Thanks,

    Liyam

  • Profile Image

    Answered by xcitemedia on June 07, 2011 at 04:09 PM

    Yes that would be great. I see that th action="http://www.jotform.com/submit.php" is missing from your example.


    Please let me know what I would need to do.

    Thanks,

    Derek

  • Profile Image
    JotForm Support

    Answered by liyam on June 08, 2011 at 03:05 PM

    Hello Derek,

    I intentionally removed the action attibute that's why it's missing.

    What I did was remove the "required" validation features from the form as this is no longer needed.

    Then follow these steps:

    1.) Get the source code of your form. (Go to Setup & Embed tab > Embed Form > Under display it on your site, click Source)

         Refer to this link for more details

    2.) Paste the source code on a blank HTML file.

    3.) Copy and Insert this script just below the </style> tag, and just before the <script src="//cdn... tag:

    <script>
    function formValidator() {

    var name = document.getElementById('input_1');
    var email = document.getElementById('input_3');
    var phone = document.getElementById('input_4');
    var zip = document.getElementById('input_6');

    if(isAlphabet(name, "Please enter only letters for your name")){
            if(emailValidator(email, "Please enter a valid email address")){
                if(isNumeric(zip, "Please enter a valid zip code")){
                    if(isNumeric(phone, "Please enter your Phone number")){
                        return true;
                    }
                         
                }
            }
        }
       
       
        return false;
    }

    function isAlphabet(elem, helperMsg){
        var alphaExp = /^[a-zA-Z]+$/;
        if(elem.value.match(alphaExp)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }

    function notEmpty(elem, helperMsg){
        if(elem.value.length == 0){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
            return false;
        }
        return true;
    }

    function isNumeric(elem, helperMsg){
        var numericExpression = /^[0-9]+$/;
        if(elem.value.match(numericExpression)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }



    function emailValidator(elem, helperMsg){
        var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
        if(elem.value.match(emailExp)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }
    </script>

    4.) Add the attribute and the value inside the <form> tag (in bold font weight):

    <form class="jotform-form" action=" " method="post" name="form_11565631505" id="11565631505" accept-charset="utf-8" onsubmit='return formValidator()' >

    5.) Replace the button tag:

    <button class="form-submit-button" type="submit" id="input_2">
             Submit Form
     </button>

        with this one:

     <input type="submit" name="submit Form" value="Submit Form" />

    6.) Now save your new HTML file and upload it on your website. 

    7.) Edit your index page and replace the iframe code from

    <iframe scrolling="no" frameborder="0" style="width:100%; height:317px; border:none;" src="http://form.jotform.com/form/11565631505?city=" allowtransparency="true">

          to 

    <iframe scrolling="no" frameborder="0" style="width:100%; height:317px; border:none;" src="http://rootertown.com/colorado-springs/yournewfile.html?city=" allowtransparency="true">

    Now, try view and try your new form if it works properly.  If you're having difficulty making this work, just let me know.  You may also check the source code of the link I have provided for your reference.

    One note when doing this:  Any changes you make on your form using Jotfom's form editor won't update your form here.  You will also have to carefully update your external form.

    If you have other questions or concerns, just let us know.

    Thanks,

    Liyam