Question

代码事实：

我正在使用jQuery
还使用jQuery Validate插件

我的表单的功能：

我有一个分为两部分的表格。这是一种形式，但被两个大的div分解
表格的肉（名字，姓氏等）在第一部分。
我在表单的第一部分也有一个动态表格，因此人们可以自己注册，最多可以注册20个人。
最后，有一个注册码。这些代码最多只能使用20次。意思是如果一个人注册自己，另外19个人注册代码test那就是它，测试不再是可用的注册码。

问题：

假设注册码test已被使用了18次。因此验证器如果能够自己注册并且还有两个人就可以正常工作，它会弹出一条消息，说明超出限制。然而如果他们首先输入代码test然后添加两个人，它会将表单验证为true并继续前进。以下是验证器规则中注册码的代码：

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({...});

Answer 1

我不确定我是否了解每个细节，但您不应该在点击处理程序中调用.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)
        } 
    });

});

Answer 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

验证表格两次

2 个答案: