如何使用 parsley.js 验证 div 中的所有表单字段？

Question

我有一个带有表单字段和按钮的 div，我想让 parsley 验证 div 中具有正确 data-validate 属性的所有表单字段。无论 div 中有多少表单域，我都需要它来工作。因此它需要处理输入、文本区域和 select 字段。

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();
});

Answer 1

你可以使用

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

参见 fiddle。

编辑

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

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

这是新的fiddle。

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

$("#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 and fiddle-wrap-unwrap 的链接。

如何使用 parsley.js 验证 div 中的所有表单字段？

How do I validate all form fields in a div using parsley.js?

javascript

forms

validation

parsley.js