如何根据 Meteor 中的 Parsley 表单验证隐藏/显示提交按钮？

Question

我是 parsley.js 和流星 (1.0) 的新手。我试图弄清楚如何根据表单字段是否通过欧芹验证来隐藏/显示表单提交按钮。

我最初的想法是在 HTML 模板中使用空格键来控制按钮的显示。这将由确定验证状态的模板助手驱动。我尝试了这样的助手：

formValidates: function() {
    $('#myformid').parsley().subscribe('parsley:form:validated', function(parsleyForm) {
          if (true === parsleyForm.validationResult)
            return true
          else
            return false
        }

这会产生一个错误，告诉我 parsley 需要绑定到一个对象（不确定这意味着什么）。

我应该提一下，欧芹验证正在表单上工作（验证类型、范围、必需等），并且我在每个表单输入“更改”时都有一个触发器。

这看起来应该很简单，但我缺乏经验。

Answer 1

Parsley 的主要优势之一是它的 UX/UI，它的工作原理如下：

1. 您可以使用每个元素所需的验证来创建 DOM 元素
2. 您将parsley() 绑定到您的表单

3. 你填写你的输入

   重要提示：当您第一次填写输入时（更好的是，直到表单第一次验证）不会出现错误，即使如果字段不正确。我的意思是：无论您使用的是什么 javascript 事件（focusin、focusout、change、..），第一次尝试验证表单后都会显示错误。

4. 您验证表单（通过表单提交自动或手动）
5. 将显示错误。截至目前，错误将根据您的 javascript 事件发生变化。也就是说，如果您更正该字段，则错误将消失。

因此，为了根据验证结果显示提交按钮，您需要有一些其他表单来验证表单。您可以通过 javascript 验证表单：

// bind parsley to your form. This will create a ParsleyForm object
$("#myForm").parsley();

// manually validate the form. This will display the errors for each field
$("#myForm").parsley().validate();

// Check if the form is valid. Will return a boolean value
$("#myForm").parsley().isValid();

通常，我总是显示提交按钮并使用以下 jQuery 代码提交表单：

// bind parlsey to the form
$( "#myForm" ).parsley(); 
// when the user clicks on the submit button or enters "Enter" in a field
$("#myForm" ).submit(function( event ) {
    // Validate form fields
    $(this).parsley().validate();
    // If the form is valid, will proceed with submission.
    if ($(this).parsley().isValid()) {
        console.log('valid');
    }
    event.preventDefault();
});

注意事项：

• 我没有使用过流星，因此您可能需要“转换”这些信息。

• 如果您在控制台中收到如下所示的警告：

  您必须在现有元素上绑定 Parsley。

  这意味着您正在尝试将 parsley 绑定到一个不存在的元素。当您尝试 $("#someFormId").parsley() 并且没有任何 ID 为 someFormId 的元素时，就会发生这种情况。