Question

我是parsley.js和meteor（1.0）的新手。我试图找出如何隐藏/显示表单提交按钮，基于表单字段是否通过了欧芹验证。

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

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

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

我应该提一下，欧芹验证在表单上工作（验证类型，范围，要求等），并且我在'changed'的每个表单输入上都有一个触发器。

这似乎应该相当简单，但我因缺乏经验而受到阻碍。

Answer 1

Parsley的主要优势之一是它的用户体验/用户界面以及它的工作原理：

使用每个元素所需的验证来创建DOM元素
您将parsley()绑定到表单
您填写输入

重要提示：当您第一次填写输入时（更好的是，直到表单首次验证），就不会出现错误，甚至如果字段不正确。我的意思是：无论您使用的javascript事件是focusin，focusout，change，首次尝试验证表单后都会显示错误，..）。
您验证表单（自动通过表单提交或手动）
将显示错误。截至目前，错误将根据您的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();
});

注意：

我还没有和流星一起工作，所以你可能需要＆＃34;转换＆＃34;这个信息。
如果您在控制台中收到如下警告：

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

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

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

1 个答案: