Question

我创建了一个多步骤表单。我使用jquery在每个步骤上添加验证。如果字段为空，则禁用下一个按钮。如果字段不为空，则启用下一个按钮。

我使用此代码进行验证

$('form.webform-client-form').bind("change keyup",function(){
var card_name = $('#edit-submitted-first-name1').val();
var card_number = $('#edit-submitted-card-number').val();
var expiration_year = $('#edit-submitted-expiration-year-year').val();
var expiration_month = $('#edit-submitted-expiration-year-month').val();
var cvv = $('#edit-submitted-cvv').val();
if (card_name != "" && card_number != "" && expiration_year != "" && expiration_month !="" && cvv != ""){
  $('form.webform-client-form').find('#edit-submit').attr('disabled', false);
  $('form.webform-client-form').find('#edit-submit').addClass('active');
}
else {
$('form.webform-client-form').find('#edit-submit').attr('disabled', true);
  $('form.webform-client-form').find('#edit-submit').removeClass('active');
}
});

问题在于，当用户填写表单中的信息时，他点击下一个按钮，如果他点击上一步按钮并返回到第一个表单，则所有信息都已预先填写，但是在用户输入某个值之前不会启用下一个按钮键盘功能。如果用户返回上一个表单，我想启用下一个按钮。

有没有办法解决这个问题，或者还有其他方法。

任何帮助都将不胜感激。

Answer 1

首先从绑定中移出所有逻辑，然后在绑定中调用它，然后在按下后退按钮时调用用于键入的验证功能。这样它将检查字段并启用按钮

Answer 2

您需要解除启用和禁用键的下一个按钮，这是唯一调用它的事件。我会把它移到一个公共函数，当有一个相关的keyup和一个值从上一步点击下一个按钮时调用。

使用keyup函数进行表单验证的多步骤表单

2 个答案: