6

代码事实：

  1. 我正在使用 jQuery
  2. 还使用 jQuery Validate 插件

我的表格的特点：

  1. 我有一个分成两部分的表格。这都是一种形式，但被两个大 div 分解
  2. 表格的内容（名字、姓氏等）在第一部分。
  3. 我还在表格的第一部分有一个动态表格，因此人们可以注册自己和最多 20 人。
  4. 最后是注册码。这些代码最多只能使用 20 次。这意味着如果一个人用注册码注册自己和其他 19 个人，test那么就是这样，测试不再是可用的注册码。

问题：

假设注册码test已经被使用了 18 次。因此，如果他们注册自己和另外两个人，验证器工作正常，它会弹出一条消息，说超出了限制。但是，如果他们首先输入代码test然后添加两个人，它会验证表单为真并继续前进。这是验证器规则中的注册码代码：

regis_code: {
    required: true,
    reg_code: true,         
    remote: { 
        url: "Private/Code_checker.php", 
        data: {
            num: function() {
               return num_rows;
            },
            },
        async: false 
    }
}

所以php脚本工作得很好。我需要做的是在他们填写表格时进行验证，但也要在提交之前进行验证。另一个问题是表单第一部分的按钮不是提交按钮，它只是一个隐藏当前 div 并显示表单的下一个 div（第 2 部分）的按钮。我如何在他们输入时进行验证，并在他们单击按钮转到第 2 部分时进行验证？

这是按钮代码以及验证器的内容：

$('.button2').click(function() {
    if(val.form()) {
        $('.box').animate({ height:520, left: '-=50', top: '+=30', width: '-=350' }, 750);
        $('div.box label').animate({width: '-=100%'},500);
        $('#part1').fadeOut('slow', function() {
            $('#part2').fadeIn('slow');
        });
        $('#PaySubmit').fadeIn('slow');
    }
});
var val = $('#everything').validate({...});
4

2 回答 2

3

不确定我是否理解每一个细节，但你不应该.validate()在点击处理程序内部调用，因为.validate()每次点击按钮时都会重新初始化表单上的插件，这不是你想要的。

.validate()-在 DOM 就绪后初始化插件（带有选项） 。

.valid()- 检查验证状态（布尔值）或随时验证form。

将您的代码更改为如下所示。该按钮不会提交表单#everything，因为您可能.button2不是提交按钮。但是，单击.button2将检查表单是否通过了验证，如果该条件为真，则执行其余的功能。

$(document).ready(function() {

    $('#everything').validate({ // initialize validation plugin once
        // options
    }); 

    $('.button2').click(function() {
        if( $('#everything').valid() ) { // check if form passes validation
            $('.box').animate({ height:520, left: '-=50', top: '+=30', width: '-=350' }, 750);
            $('div.box label').animate({width: '-=100%'},500);
            $('#part1').fadeOut('slow', function() {
                $('#part2').fadeIn('slow');
            });
            $('#PaySubmit').fadeIn('slow');
        }
    });

});

现在，鉴于上面的有用信息，我认为如果您使用两组不同的form标签，您的系统会更好地工作。您将拥有不同验证选项的优势，并且可能为您的两步系统提供更大的灵活性。

.validation()使用自己独特的选项在两种表单上进行设置。然后使用按钮检查第一个（不提交），然后利用submitHandler:第二个表单中的函数来提交两个表单。如果您不需要/不想同时提交这两个表单，您可以编写一个函数来捕获表单 1 的值，复制到隐藏input元素中并与表单 2 一起提交。

像这样的东西...

$(document).ready(function() {

    $('#form1').validate({ // setup form 1 validation but leave out both submitHandler and submit button.
        // options
    });  

    $('#button').click(function() {  // setup button to check validation state of form 1 and reveal form 2 if true.
        if ( $('#form1').valid() ) {
            // do stuff, reveal your other form, etc.
        }
    });

    $('#form2').validate({  // setup form 2 validation and use submitHandler to take care of submission of one or both sets of data.
        // options,
        submitHandler: function(form) {
            $('#form1').submit();  // alternatively copy the values from form 1 and include in form 2's submission
            $(form).submit();      // submit this form (#form2)
        } 
    });

});
于 2012-12-03T22:01:05.373 回答
2

您可以随时使用该valid()方法（如果validate()已被调用...），因此您可以在提交表单时强制验证表单：

if (!$("#everything").valid()) {
  // do whatever you need to do
  return false;     // cancel the submit
}

您还可以将事件处理程序附加到选择其他人数或动态添加新人员并使用相同方法的字段。

编辑：另一种方法valid()是只检查特定的表单字段而不是整个表单：

$("#everything").validate().element("#reg_code");
// assuming that the registration code field has an ID called reg_code
于 2012-12-03T21:38:13.707 回答