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

Posted 2023-05-09

【中文标题】带有下一个/上一个按钮的 jQuery 验证

【英文标题】：jQuery validation with next/prev button

【发布时间】：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 ：在评论之前我已经添加了一个答案

【参考方案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);
    
);