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

How to validate only selected fields using parsley js

提问by guitarlass

I'm using parsley js in two forms in a single page. i want to trigger parsley validator when i click on a type='button' field and validate the first form to check only 3 fields of the form. Initially there are around 7 fields in the form included for validation. So far I couldn't make it work. tried thisbut no luck.

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

any idea?

任何的想法？

update: this is my code;

更新：这是我的代码；

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

i just tried to exclude one field and test if the form is validating as i want it to be. But still it validates input field inside css class 'two'. that's all i have done so far. no clue..

我只是试图排除一个字段并测试表单是否按我希望的那样进行验证。但它仍然验证 css 类“two”中的输入字段。这就是我迄今为止所做的一切。没有线索..

回答by Luís Cruz

You have a couple of issues with your code, specifically with this line:

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

<dir classs = 'two'>

that should be

那应该是

<div class = 'two'>

That is, you have dirinstead of divand classsinstead of class. You should also use $('#form').parsley().validate()instead of $('#form').parsley('validate').

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

The following code will work:

以下代码将起作用：

<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>

You can view a more complete working example in this jsfiddle

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

---

---

For your case, you should consider using data-parsley-group(see the docs) to achieve the same result, with the following code:

对于您的情况，您应该考虑使用data-parsley-group（参见文档）来实现相同的结果，代码如下：

<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>

The difference between the two, is that in the first example you redefine the excludedoption. In the second example you would use data-parsley-groupand validate only that group.

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

For a complete example, visit this jsfiddle(you can test it and change $('#form').parsley().validate("second");to $('#form').parsley().validate("first");to see what happens).

对于一个完整的示例，请访问此的jsfiddle（可对其进行测试和修改 $('#form').parsley().validate("second");，以$('#form').parsley().validate("first");看看会发生什么）。

回答by Manoj Kargeti

just an add on to the answer above, to work correctly , use group name in isValid too,ie $('#form').parsley().isValid("second")).

只是对上述答案的补充，为了正常工作，在 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>