2016-02-26 52 views
0

我有一個附帶Jquery.validate()規則的表單。這一切都工作正常,並驗證規則正在適用於第一頁加載罰款。Jquery.validate()表單提交後沒有「重新加載」(meteor.js)

用戶提交表單後,我向他們顯示一個「謝謝」消息,該消息顯示使用基於提交的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); 
     } 
}); 
+0

您是否嘗試過重新設置形式?請參閱:http://jqueryvalidation.org/Validator.resetForm/ – Sparky

+0

我嘗試添加:$('#request-form')。validate()。resetForm();超時後,它仍然給我相同的行爲 – user1072337

回答

0

我相信這是因爲你的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> 
+0

我將如何實現#2? – user1072337

+0

添加代碼到我的答案。 –

+0

您不能在同一頁面上多次運行'.validate()'。它僅在頁面加載時使用一次來初始化插件。 – Sparky

相關問題