0

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.

4

2 回答 2

0

jQuery 提供了.one()完全做到这一点的方法。

$('#form').one( "submit", function(event){

    event.preventDefault();

});
于 2012-11-24T22:21:42.310 回答
0

因此，要按照您的要求进行操作，这应该可以解决问题：

 $(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;
    }
  });
});

但是，我真的不确定这是实现最终目标的最佳方式。更好的是使用 javascript 验证（例如jQuery 验证插件），在单击按钮（不是提交）后验证第一部分，然后跟踪表单的初始部分是否有效，而不是它是否已经提交，然后决定显示模态。

即做这样的事情（伪代码，不会按原样工作，只是为了说明方法）：

 $(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();
    }
  });
});

然后在表单的模态部分只有一个提交按钮。

于 2012-11-24T22:20:22.537 回答