Can you set validation to only run after submit

  • Profile Image
    xcitemedia
    Asked 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

  • Profile Image
    liyam
    Answered 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
    xcitemedia
    Answered 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
    liyam
    Answered 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