根据 Jquery.validate() 更改 reactiveVar 会导致 meteor.js

Question

我在 meteor.js 中使用 Jquery.validate() 包来确保将正确的输入输入到表单中。

提交时，我正在使用 reactiveVar 来更改我的视图输出。如果验证测试通过，我如何只更改 reactiveVar？

看起来像这样：

thissite.js:

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

Template.inquiry.onRendered(function(){
    $('#request-form').validate();
});

inquiry.js

Template.inquiry.helpers({

  //toggles 'thank you' on inquiry template
  showForm: function () {
    return Template.instance().showForm.get();
  },

});

Template.inquiry.events({
  'click .submit': function(event, template) {
    template.showForm.set( false );
    Meteor.setTimeout( function() {
      template.showForm.set( true );
    }, 10000); // Reset after 10 seconds.
  },
});

inquiry.html:

<template name="inquiry">

{{#if showForm }}

<form class="request-form" id="request-form" method="post" action="#">
<input type="text" name="name" id="name" value="" placeholder="Name" required />
<input type="email" name="email" id="email" value="" placeholder="Email" required />
<input class="submit" type="submit" value="Send Inquiry" />

{{else}}

Thank You message

{{/if}}

</template>

Answer 1

将您的代码更改为：

    'click .submit': function(event, template) {

        var $form = template.$('.request-form');

        if ($form.valid()) {
            template.showForm.set( false );

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

Answer 2

Jquery.validate() 有回调选项方法 submitHandler，你可以在 validate plugin docs.

中阅读它

Template.inquiry.onRendered(function(){
    $('#request-form').validate({
        submitHandler: function() {...}
    });
});

根据 Jquery.validate() 更改 reactiveVar 会导致 meteor.js

Changing a reactiveVar based on Jquery.validate() results in meteor.js

jquery

jquery-validate

meteor