Question

此处Demo

每个块包含5个问题。每个块必须填写并转到下一个块。

我累了，表单已经过验证，但它会进入下一个区块。我需要填写所有值并转到下一个块。

在最后一个块中只包含提交按钮。 如何查看提交按钮的最后一个块。

$('#nextBlock').click(function() {
    $('#register').valid();
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#nextBlock').attr('disabled', true);
    }
    $('#prevBlock').attr('disabled', null);
});

感谢您的评论和评论：）

这里我更新了Codepen：的 Demo

我有另一个问题。它的作品只有codepen。但在我的HTML不工作。单选按钮未验证。仅对文本框有效

Answer 1

在使用之前检查它需要在表单上调用
validate() 这种方法。

http://jqueryvalidation.org/valid

你应该检查后面的valid（）值;

 $('#register').validate()
if($('#register').valid()){
   // do the action
   }

WORKING CODEPEN

$(function(){
$('#register').validate();
    $('#nextBlock').click(function() {

      if ($('#register').valid()) {
        $('.current').removeClass('current').hide()
          .next().show().addClass('current');
        if ($('.current').hasClass('last')) {
          $('#nextBlock').attr('disabled', true);
        }
        $('#prevBlock').attr('disabled', null);
      }

    });

});

Answer 2

将.valid（）置于if条件中，如果该字段已经过验证，它将返回true，并且只会进入下一步：

$('#nextBlock').click(function() {
    if ($('#register').valid()) {
        $('.current').removeClass('current').hide()
            .next().show().addClass('current');
        if ($('.current').hasClass('last')) {
            $('#nextBlock').attr('disabled', true);
        }
        $('#prevBlock').attr('disabled', null);
    }
});

使用next / prev按钮进行jQuery验证

2 个答案: