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>