Question

我有一个附有Jquery.validate（）规则的表单。这一切都运行正常，验证规则在第一页加载时正常应用。

用户提交表单后，我会向他们展示一个＆＃34;谢谢你＆＃34;消息，根据提交显示使用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>

Jquery.validate（）不是＆＃34;重新加载＆＃34;表格提交后（meteor.js）

1 个答案: