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>

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

我也愿意接受更好的方法来完成这项任务。因为根据我的理解，我的代码实际上并没有“听”＆＃34;任何请求的回复。

提前致谢。

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选择器和函数

jQuery / AJAX验证后提交

1 个答案: