Question

Ok, so various forms of this question have been asked, but I can’t find enough information to make my particular case work, so here is the context of what I’m trying to do:

I have a form which has half of its elements displayed on the page like normal, and the other half of its elements are displayed in a modal (on the same page, but starts out hidden and with all elements pre-populated with info off of a DB, so they are valid by default). This form also has 2 submit buttons, one on the page at the bottom of the 1st half of elements, and another on the modal itself. When the first submit button is clicked, I want the form to perform regular native HTML5 validation (yes, it will have to perform this on the entire form, including those fields in the modal, however, as I said, they are pre-populated off of a DB so they will be valid by default).

However, once all elements on the page itself are valid, I DON’T want the form to submit yet. Instead, I want to display the Modal with the other half of the elements (again, already pre-populated with info from the DB – I want the user to confirm that info). When the submit button contained on the modal is clicked, I want it to perform the same regular HTML5 validation and then actually submit the form (as long as it’s all still valid).

So, I found the following jquery in another answer which allows the browser to perform the HTML5 validation on the form, but blocks the submit event:

    $(function() {
      $('#form').submit(function(event){

        // cancels the form submission
        event.preventDefault();

      });
    });

My problem is this, I only want the above jquery to run on the first submit button’s click, and not the second button’s click. If there is a way to do this, I think my problem will be solved. Again, the reason I’m doing this is because I want the user to confirm the information that is displayed on the modal which pops up before the entire form is completely submitted…I know I could mitigate this by not using a modal at all and having everything on the one page, but I really want to use the modal. Sorry if this question is misplaced, has already been answered, confusing, or anything else. If it is confusing or you need more explanation/code let me know and I will edit the question.

Thanks in advance.

Answer 1

So to do what you’re asking, this should do the trick:

 $(function() {
  //track whether the form has been submitted, define here so it persists across submit events
  var submitted = false;
  $('#form').submit(function(event){
    // the outer function's variables are available in the inner function
    if (!submitted) {
      event.preventDefault();
      submitted = true;
    }
  });
});

However I’m really not sure this is the best way to achieve your ultimate aim. Far better would be to use javascript validation (eg the jQuery validation plugin), validate the first section after a button click (not a submit) and then track whether the initial part of the form is valid or not, rather than whether it has been submitted, then decide to show the modal.

ie do something like this (pseudocode, won’t work as is, just to illustrate approach):

 $(function() {
  $('#form').on('click','button.first', function(e){
    //check that the first part of the form is valid when the `<button class="first">` is clicked, if it is, show the modal:
    var firstSectionValid = $('#form').find('#first-section').validate();
    if (!firstSectionValid) {
      showModal();
    }
  });
});

Then just have one submit button in the modal section of the form.