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

Posted 2023-05-09

【中文标题】表单提交后 Jquery.validate() 不“重新加载”（meteor.js）

【英文标题】：Jquery.validate() not "reloading" after form submission (meteor.js)

【发布时间】：2016-06-10 03:42:38

【问题描述】：

我有一个附有 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);  
        
);

【问题讨论】：

您是否尝试过重置表单？见：jqueryvalidation.org/Validator.resetForm

我尝试添加： $('#request-form').validate().resetForm();超时后，它仍然给我同样的行为

【参考方案1】：

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

代码：

<template name="inquiry">

    <form id="request-form" style="#unless showFormvisibility:hidden;/unless">
      ...
    </form>

    #unless showForm 

      Thank you form here

    /unless 

</template>

【讨论】：

我将如何实现#2？

您不能在同一页面上多次运行.validate()。它仅用于在页面加载时初始化插件一次。

有趣。那么你必须选择选项#1。

抱歉，我该如何隐藏表单？我还能使用响应式变量吗？

您必须添加另一个帮助程序，但该帮助程序可以只返回一个 CSS 类，该类可以根据反应 var 值使表单可见或不可见。