如何使用parsley.js验证div中的所有表单域？(How do I validate all form fields in a div using parsley.js?)

如何使用parsley.js验证div中的所有表单域？(How do I validate all form fields in a div using parsley.js?)

我有一个带有表单字段和按钮的div，我想要欧式验证该div中具有正确data-validate属性的所有表单字段。 无论div中有多少个表单字段，我都需要它才能工作。 因此，它需要处理输入，textareas和选择字段。

HTML：

<div id="parsley-div"> <div class="form-group"> <label for="city">City</label> <input id="city-test" type="text" class="form-control" data-parsley-required data-parsley-required-message="Please enter a city name."> </div> <button class="btn btn-primary">Save Changes</button> </div>

JS：

$('#parsley-div').find('button').click(function(){ $('#parsley-div').parsley().validate(); });

不幸的是，这不起作用。 我注意到如果表单字段周围有一个表单标签，它可以工作，但我需要它是一个div。 我创建了一个显示这两种情况的JSFiddle： https ：//jsfiddle.net/8rkxzjx1/2/

如何让parsley在指定的div中使用data-parsley属性验证所有表单字段？ 如果可能，请编辑JSFiddle以显示正确的实现。 谢谢。

编辑：

我想出了这个作品，但感觉效率不高：

$('#parsley-div').find( "input, textarea, select" ).each(function (index, value) { $(this).parsley().validate(); });

I have a div with a form field and a button that I would like to have parsley validate all the form fields in that div that have the proper data-validate attribute. I need it to work no matter how many form fields are in the div. So it needs to work on inputs, textareas, and select fields.

HTML:

<div id="parsley-div"> <div class="form-group"> <label for="city">City</label> <input id="city-test" type="text" class="form-control" data-parsley-required data-parsley-required-message="Please enter a city name."> </div> <button class="btn btn-primary">Save Changes</button> </div>

JS:

$('#parsley-div').find('button').click(function(){ $('#parsley-div').parsley().validate(); });

Unfortunately, this isn't working. I noticed it works if there is a form tag around the form fields, but I need it to be a div. I have created a JSFiddle that shows both cases: https://jsfiddle.net/8rkxzjx1/2/

How can I have parsley validate all form fields with data-parsley attributes within a specified div? If possible, please edit the JSFiddle to show the correct implementation. Thank you.

Edit:

I figured out this works, but it doesn't feel very efficient:

$('#parsley-div').find( "input, textarea, select" ).each(function (index, value) { $(this).parsley().validate(); });

最满意答案

你可以用

$('#parsley-div :input:not(:button)').parsley().validate();

看小提琴 。

编辑

看起来上面的代码不起作用。 以下可以作为建议的OP使用。

$('#parsley-div :input:not(:button)').each(function (index, value) { $(this).parsley().validate(); });

这是新的小提琴 。

或者内容可以包装在表单元素中，然后按如下方式进行验证：

$("#parsley-div").wrap("<form id='parsley-form'></form>"); $('#parsley-div').find('button').click(function() { $('#parsley-form').parsley().validate(); });

或者由于OP不希望在Dom中有表单元素，因此可以将内容包装在表单元素中，然后在验证后删除表单。

$('#parsley-div').find('button').click(function() { $("#parsley-div").wrap("<form id='parsley-form'></form>"); $('#parsley-form').parsley().validate(); $("#parsley-div").unwrap(); });

链接到fiddle-wrap和fiddle-wrap-unwrap 。

You could use

$('#parsley-div :input:not(:button)').parsley().validate();

See fiddle.

Edit

Looks like the above code won't work. The following can be used as the OP suggested.

$('#parsley-div :input:not(:button)').each(function (index, value) { $(this).parsley().validate(); });

Here is the new fiddle.

Or the content can be wrapped in a form element and then be validated as follows:

$("#parsley-div").wrap("<form id='parsley-form'></form>"); $('#parsley-div').find('button').click(function() { $('#parsley-form').parsley().validate(); });

Or since the OP does not want to have a form element in Dom, content can be wrapped in a form element and then the form can be removed after validation.

$('#parsley-div').find('button').click(function() { $("#parsley-div").wrap("<form id='parsley-form'></form>"); $('#parsley-form').parsley().validate(); $("#parsley-div").unwrap(); });

Links to fiddle-wrap and fiddle-wrap-unwrap.