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

Question

我有一个带有表单字段和按钮的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 data-parsley使用指定div中的属性验证所有表单字段？如果可能,请编辑JSFiddle以显示正确的实现.谢谢.

编辑:

我发现这是有效的,但感觉效率不高:

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

Answer 1

你可以用

$('#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.