两次验证表格 [英] Validate Form Twice

问题描述

代码事实:

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

我的表单的特征:

1. 我有一个分为两部分的表格.都是一种形式，但被两个大div分解了
2. 形式(名字，姓氏等)的肉在第一部分.
3. 我在表单的第一部分也有一个动态表，因此人们可以注册自己以及最多20个人.
   
4. 最后，有一个注册码.这些代码最多只能使用20次.意味着如果一个人使用注册代码test进行了自己的注册，而另外19个人使用注册代码test进行了注册，那么测试不再是可用的注册代码.

1. I have a form that is split up into two parts. It's all one form but broken up by two large divs
2. The meat of the form (first name, last name, etc) is on the first part.
3. I also have a dynamic table on the first part of the form, so people can register themselves and up to 20 other people.
   
4. Finally, there is a registration code. These codes are only usable up to 20 times. Meaning if one person registers themselves and 19 other people with the registration code test then that's it, test is no longer a usable registration code.

问题:

比方说注册代码test已被使用18次.因此，如果验证者注册了自己和另外两个人，则验证器会正常工作，它会弹出一条消息，提示已超出限制. 但是，如果他们先输入代码test首先，然后将两个人加在一起，它将验证表单为true并继续.这是验证程序规则内的注册代码代码:

Let's say the registration code test has already been used 18 times. So the validator works fine if they register themselves and two more people, it pops up a message saying the limit is exceeded. However if they type in the code test FIRST and then add the two people, it validates the form to true and moves on. Here's the code for the registration code inside the rules for the validator:

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部分时如何验证?

So php script works just fine. The thing I need to do is to validate while they are filling out the form BUT ALSO validate right before submitting. The other problem is that the button for the first part of the form is not a submit button, it is just a button that hides the current div and shows the next div (part 2) of the form. How can I validate while they are typing and also validate when they click the button to go to part 2?

以下是按钮代码以及验证器的内容:

Here's the button code along with the validator stuff:

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

推荐答案

不确定我是否了解每个细节，但您不应在点击处理程序中调用.validate()，因为.validate()只是在每个表单上重新初始化插件当您单击按钮时，这不是您想要的.

Not sure I understood every detail, but you should not be calling .validate() inside of a click handler because .validate() simply reinitializes the plugin on the form every time you click the button, which is not what you want.

.validate()-在DOM就绪后初始化一次的插件(带有选项).

.validate() - to initialize the plugin (with options) once on DOM ready.

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

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

Change your code to something like this below. The button will not submit the form #everything because, presumably, your .button2 is not a submit button. However, clicking .button2 will check if the form passes its validation and perform the rest of your function if that condition is true.

$(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标记，您的系统会更好.您将拥有不同验证选项的优势，并且可能为两步系统带来更大的灵活性.

Now, given that useful information above, I think your system would work better if you use two different sets of form tags. You'd have the advantage of different validation options and perhaps more flexibility for your two step system.

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

Set up .validation() on both forms with their own unique options. Then use a button to check the first one (with no submission), and then leverage a function inside the submitHandler: on the second form to submit both forms. If you don't need/want to submit both forms, you could write a function to capture the values of form 1, copy into hidden input elements and submit those along with form 2.

类似这样的事情...

Something like this...

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

});

这篇关于两次验证表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！