javascript - jQuery/AJAX 验证后提交

Question

我的服务器上有一个通过 POST 请求提交的表单，该请求调用第三方 API。此 API 可能有点慢(5-8 秒)。我不希望用户提交两次和/或想知道他们的表单提交发生了什么。所以我们的想法是显示一个旋转的轮子，直到加载下一个页面(并且 API 请求发送回我的服务器)。

下面的代码显示了按下按钮时的旋转轮，但它并不关心表单输入是否正确。因此，如果所有字段均为空白，则不会提交表单，但会显示旋转轮。

我有一个经过验证和检查的表单，以确保使用以下代码正确输入字段

$(document).ready(function() {
  $('#ccForm').bootstrapValidator({
  // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
  },
    fields: {
       fname: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },
      lname: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },
      baddr1: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },

      package: {
        validators: {
          notEmpty: {
            message: 'Must Pick Package'
          }
        }
      },
      bcity: {
        validators: {
          notEmpty: {
            message: 'Must Enter a City'
          }
        }
      },
      bcountry: {
        validators: {
          notEmpty: {
            message: 'Must select a Country'
          }
        }
      },
      bstate: {
        validators: {
          notEmpty: {
            message: 'Must Select a State'
          }
        }
      },
      ccnum: {
        validators: {
          creditCard: {
            message: 'The credit card number is not valid'
          },
          notEmpty: {
            message: 'Must Enter a Card Number'
          }
        }   
      },
      ccmo: {
        validators: {
          stringLength: {
            min: 2,
            max: 2,
            message: 'Two Digits'
          },
          digits: {
            message: 'The value is not an integer'
          },
          notEmpty: {
            message: 'Must Enter a Exp Month'
          }
        }   
      },
      ccyr: {
        validators: {
          stringLength: {
            min: 2,
            max: 2,
            message: 'Two Digits'
          },
          digits: {
            message: 'The value is not an integer'
          },
          notEmpty: {
            message: 'Must Enter a Exp Year'
          }
        }   
      },
      cvv2: {
        validators: {
          cvv: {
            creditCardField: 'ccnum',
            message: 'The CVV number is not valid'
          },
          notEmpty: {
            message: 'Must Enter a CVV'
          }
        }
      },
      bzip1: {
        validators: {
            zipCode: {
              country: 'bcountry',
              message: 'The value is not valid %s'
            },
            notEmpty: {
              message: 'Must Enter a Zip'
            }
          }
      }
    }
  })

以下是旋转轮

(function (d) {
d.getElementById('ccForm').onsubmit = function () {
d.getElementById('pay').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));

旋转轮的 HTML 代码:

<div id='loading2' style='display:none;'>
  <i class='fa fa-spinner fa-spin fa-3x'></i>
</div>

我需要在正确验证表单之前不提交/显示旋转轮的代码。

我也愿意接受更好的方法来完成这项任务。因为据我了解，我的代码实际上并没有“监听”任何请求的响应。

提前致谢。

Answer 1

引导验证器 has an event当表单有效时触发:success.form.bv

所以你可以尝试这样的事情:

(function (d) {
    $('#ccForm').on('success.form.bv', function () {
        d.getElementById('pay').style.display = 'block';
        d.getElementById('loading2').style.display = 'block';
    });
});

作为补充说明，如果您已经包含了 jQuery，您也可以在 getElementById 上使用 jQuery 选择器和函数