触发欧芹验证没有提交表格？

Question

鉴于此代码，它永远不会工作，并始终返回真实？

<form id="my-form" data-validate="parsley">
  <p>
    <label for="username">Username * :</label>
    <input type="text" id="username" name="username" data-required="true" >
  </p>

  <p>
    <label for="email">Email Address * :</label>
    <input type="text" id="email" name="email" data-required="true" >
  </p>

  <br/>

  <!-- Validate all the form fields by clicking this button -->
  <a class="btn btn-danger" id="validate" >Validate All</a>
</form>

<script>
var $form = $('#my-form');
$('#validate').click (function () {
    if ( $form.parsley('validate') )
      console.log ( 'valid' ); <-- always goes here
    else
      console.log ('invalid');
});

</script>

所以我的问题是，如果有一种方法可以在不添加提交按钮的情况下触发欧芹验证？

Answer 1

$form.parsley('validate')是1.x API。 它在您可能使用的2.x版本中已弃用。

请尝试使用$form.parsley().validate() 。

最好

Answer 2

我一直在高低搜索，尝试使用非表单标签进行表单验证。 我想我对框架的最大抱怨是它不能与非表单元素一起开箱即用。 如果每次尝试验证时都没有滚动到页面顶部，我可以使用表单元素。 因为这种行为是表单的工作方式所固有的，所以只有这样才能修复它。

正如旁注，在div标签上使用data-parsley-validate属性也可以。 您也可以正常初始化表单（这意味着您可以订阅验证）。

示例html：

<div id="signupForm" data-parsley-validate>
    ... put form inputs here ...
    <button id="signupBtn">Sign me up</button>
</div>

只需确保将js放入：

var $selector = $('#signupForm'),
    form = $selector.parsley();

form.subscribe('parsley:form:success', function (e) {
    ...
});

$selector.find('button').click(function () {
    form.validate();
});

Answer 3

如果你在按钮上放置type =“button”，它将不会刷新并在单击时滚动到页面顶部。