带有下一个/上一个按钮的 jQuery 验证答案

【问题标题】：jQuery validation with next/prev button带有下一个/上一个按钮的 jQuery 验证
【发布时间】：2016-05-31 13:44:04
【问题描述】：

这里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 中不起作用。单选按钮无效。仅文本框有效

【问题讨论】：

你在使用jquery验证插件吗
@ArunPJohny 他没有检查 valid() 值，也没有调用 validate();在它之前..
jsfiddle.net/arunpjohny/uhjLdnyo/3
@ArunPJohny ：在评论之前我已经添加了一个答案

标签： jquery validation jquery-validate

【解决方案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);
      }

    });

});

【讨论】：

您在.validate() 之前有一个.valid()。在 click() 处理函数中也有 .validate()。仅供参考 - .validate() 方法仅用于初始化插件，应该在 DOM 就绪时完成，而不是在点击处理程序中。
@Sparky：你是对的 validate..它应该在 DOM 就绪和 valid() 上完成，然后 validate 只是一个错字:) 感谢您指出:)

【解决方案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);
    }
});

【讨论】：