Question

鉴于此代码，它永远不会起作用，并且总是返回true？

<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”放在按钮上，则单击后不会刷新并滚动到页面顶部。

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

3 个答案: