表单提交后 Jquery.validate() 不“重新加载”（meteor.js）

Question

我有一个附有 Jquery.validate() 规则的表单。这一切正常，验证规则在第一页加载时应用良好。

用户提交表单后，我向他们显示“谢谢”消息，该消息使用基于提交的 reactiveVar 显示。大约 10 秒后，我更改了 reactiveVar，删除了谢谢，然后再次向他们展示表单。

如果用户现在尝试填写表单，则验证规则不适用（在页面刷新时它们再次正常工作，但我不想刷新页面）。到底是怎么回事？

Template.inquiry.onCreated( function() {
    //toggles 'thank you' on inquiry template
    this.showForm = new ReactiveVar( true );
});

Template.inquiry.onRendered(function(){
    $('#request-form').validate({
        rules: {
            name: {
                required: true,
                maxlength: 255
            },
            email: {
                required: true,
                email: true,
                emailUnique: true,
                minlength: 3,
                maxlength: 255
            }
        },
        messages: {
            name: {
                required: "Please let us know your name."
            },
            email: {
                required: "Please enter an email address so we can reach you.",
                email: "You've entered an invalid email address.",
                minlength: "Your email must be at least {0} characters.",
                emailUnique: "That email has already been submitted.  Please enter a unique email!"
            },
        }
    });
});


<template name="inquiry">

{{#if showForm }} 

form here

{{else}} 

Thank you here

{{/if}} 


Template.inquiry.events({
        'submit form': function(event, template) {
            event.preventDefault();
            var $form = template.$('#request-form');

                if ($form.valid()) {

                    var name = event.target.name.value;
                    var email = event.target.email.value;

                    UserList.insert({
                        name: name,
                        email: email,
                    });

                    template.showForm.set( false );

                    Meteor.setTimeout( function() {
                      template.showForm.set( true );
                    }, 10000); // Reset after 10 seconds.
                }

            window.scroll(0,0);  
        }
});

Answer 1

我相信这是因为您的模板中有 if/else。当感谢表格显示时，它会从文档中完全删除您的其他表格。当它恢复时， .validate() 不会重新运行。您应该只隐藏表单，而不是将其从 DOM 中完全删除。

代码：

<template name="inquiry">

    <form id="request-form" style="{{#unless showForm}}visibility:hidden;{{/unless}}">
      ...
    </form>

    {{#unless showForm}} 

      Thank you form here

    {{/unless}} 

</template>