如何使用欧芹 js 仅验证选定的字段答案

【问题标题】：How to validate only selected fields using parsley js如何使用欧芹 js 仅验证选定的字段
【发布时间】：2014-09-19 08:55:01
【问题描述】：

我在一个页面中以两种形式使用 parsley js。当我单击 type='button' 字段并验证第一个表单以仅检查表单的 3 个字段时，我想触发 parsley 验证器。最初，表单中有大约 7 个字段用于验证。到目前为止，我无法让它工作。试过 this 但没有运气。

有什么想法吗？

更新：这是我的代码；

<div class = 'two'>
    <input type='text' id='firstname' name='firstname' />
</div>
$('#form').parsley({
    excluded: '.two input'
});
$('#form').parsley('validate');

我只是尝试排除一个字段并测试表单是否按照我想要的方式进行验证。但它仍然验证了 css 类“二”中的输入字段。这就是我到目前为止所做的一切。没有头绪。。

【问题讨论】：

您能否发布您目前拥有的 html 和 javascript，或者更好的是，创建一个 jsfiddle 以便我们对其进行测试？您是否尝试过data-parsley-group 来验证您的表单的一部分？

标签： javascript jquery validation parsley.js

【解决方案1】：

您的代码有几个问题，特别是这一行：

<dir classs = 'two'>

应该是这样的

<div class = 'two'>

也就是说，你有dir 而不是div 和classs 而不是class。您还应该使用$('#form').parsley().validate() 而不是$('#form').parsley('validate')。

以下代码将起作用：

<form method='post' id='form'>
    <div class = 'two'>
        <input type='text' id='firstname' name='firstname' required />
    </div>
    <div>
        <input type='text' id='thisisrequired' name='thisisrequired' required />
    </div>
    <button type="button" id="submit-form">Submit</button>
</form>

<script>
    $(document).ready(function() {
        $('#form').parsley({
            excluded: '.two input'
        });

        $("#submit-form").on('click', function() {
            $('#form').parsley().validate();
            if ($('#form').parsley().isValid()) {
                console.log('valid');
            } else {
                console.log('not valid');
            }
        });
    });
</script>

您可以在this jsfiddle查看更完整的工作示例

对于您的情况，您应该考虑使用data-parsley-group (see the docs) 来获得相同的结果，代码如下：

<form method='post' id='form'>
    <div>
        <input type='text' id='firstname' name='firstname' data-parsley-group="first" 
            required />
    </div>
    <div>
        <input type='text' id='thisisrequired' name='thisisrequired' 
            data-parsley-group="second" required />
    </div>
    <button type="button" id="submit-form">Submit</button>
</form>

<script>
    $(document).ready(function() {
        $('#form').parsley();

        $("#submit-form").on('click', function() {
            $('#form').parsley().validate("second");
            if ($('#form').parsley().isValid()) {
                console.log('valid');
            } else {
                console.log('not valid');
            }
        });
    });
</script>

两者之间的区别在于，在第一个示例中，您重新定义了excluded选项。在第二个示例中，您将使用 data-parsley-group 并仅验证该组。

如需完整示例，请访问this jsfiddle（您可以对其进行测试并将$('#form').parsley().validate("second"); 更改为$('#form').parsley().validate("first"); 以查看会发生什么）。

【讨论】：

【解决方案2】：

只是对上述答案的补充，才能正常工作，在 isValid 中也使用组名，即 $('#form').parsley().isValid("second"))。

<script>
    $(document).ready(function() {
        $('#form').parsley();

        $("#submit-form").on('click', function() {
            $('#form').parsley().validate("second");
            if ($('#form').parsley().isValid(**"second"**)) {
                console.log('valid');
            } else {
                console.log('not valid');
            }
        });
    });
</script>

【讨论】：