jQuery Bootstrap表单验证

问题描述

我在页面上有两个单独的表单，一次仅显示一个表单，您必须填写必填字段，然后单击“下一步”以转到下一个表单（步骤）。禁用下一个按钮，以防止在未完成必要信息的情况下继续前进。

我的问题是，在验证第二种形式之后，我不知道如何修改现有代码以便从第二个按钮中删除“禁用”属性。

当前，我的代码同时从这两者中删除了禁用的属性，这不是期望的结果。

jQuery：

$(".form-control").change(function(event) {

// Fetch form to apply custom Bootstrap validation
var form = $("#shippingCHKOut,#ccPaymentInfo")

if (form[0].checkValidity() === false) {
  event.preventDefault()
  event.stopPropagation()
} else {
    $('button#shippingOK').removeAttr("disabled"); // button on first form
    $('button#paymentOK').removeAttr("disabled");  // button on second form
}

form.addClass('was-validated');

});

解决方法

经过一番阅读和修改之后，我想我遇到了一个足以满足我需要的解决方案。如果有人遇到类似情况，我会留在这里。

$(".form-control").change(function(event) {

// Fetch form to apply custom Bootstrap validation
var form = $("#ccPaymentFields,#shippingCHKOut")

if (form[0].checkValidity() === false)  {
  event.preventDefault()
  event.stopPropagation()
} 

form.addClass('was-validated');
// Perform ajax submit here...


if ($('form#shippingCHKOut input:invalid').length > 0 ) {
    $('button#shippingOK').attr('disabled');
} else {
    $('button#shippingOK').removeAttr('disabled');
}

if ($('form#ccPaymentFields input:invalid').length > 0 ) {
    $('button#paymentOK').attr('disabled');
} else {
    $('button#paymentOK').removeAttr('disabled');
}    

});

bootstrap-4 jquery