Cognito-forms – Click next without having to fill out all required fields but not submit until all required fields are filled out

I'm a developer with Cognito Forms. Unfortunately, there is a problem with our form not displaying correctly in obsolete browsers. What is displayed is an empty form, no form fields, with a submission button. As a result, when the form is submitted, our current validation logic does detect any fields to validate, thus allowing the form to be submitted. These are the blank form submissions you are receiving notifications on and the blank entries you see in entry management. We are currently working hard on a new payment forms release that will include a fix for this issue that will not allow the user to submit a form that is not displayed correctly for any reasons.

I am a developer for Cognito Forms.

With our testing we did not use any JavaScirpt history code. We used the redirect url and added JavaScript to the embed code in order to pull the entry parameters out of the query string.

Based on your ability to add JavaScript to your website, we are assuming that you are hosting the form. We started by setting the Redirect url to the page your Cognito Form is currently embedded on.

Update your redirect url to include each field as a query sting parameter, as seen below.

Next you will need to add some script to your embed code. Here is what it should look like:

<script type="text/javascript">
   function getParameterByName(name) {
          name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
          var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                 results = regex.exec(location.search);
          return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }

We will also be editing one line of script code where the form id is assigned. This is the code we will be adding just after the id call in your embed code:

, entry: { "Textbox": getParameterByName("textbox") } });

Once added your new embed code will look like this:

<div class="cognito">
<script src="https://services.cognitoforms.com/include/required"></script>
<script src="https://services.cognitoforms.com/session/script/h581285g-2b60-153d-b3d4-ff29acd6jt0f"></script>
<script>Cognito.load("forms", { id: "1", entry: { "Textbox": getParameterByName("textbox") } });</script>
</div>

All total your Final embed code will look something like this when all put together:

    <script type="text/javascript">
       function getParameterByName(name) {
              name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
              var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                     results = regex.exec(location.search);
              return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
       }
</script>
    <div class="cognito">
    <script src="https://services.cognitoforms.com/include/required"></script>
    <script src="https://services.cognitoforms.com/session/script/h581285g-2b60-153d-b3d4-ff29acd6jt0f"></script>
    <script>Cognito.load("forms", { id: "1", entry: { "Textbox": getParameterByName("textbox") } });</script>
    </div>

You will be able to add information to your text field and submit your form. You will then be redirected to the same form on your page and the text will be populated with the same information you just entered. You will want to make sure your users know that this will happen or they might think that the form did not submit.

One last item to note is that Names and Addresses work slightly differently from other fields in that they have more information associated with them. If you need further help with the Name or Address field please submit a Support Ticket via our Feature Request so that we can help walk you through this process.