Parsley.JS 表单验证不起作用答案

【问题标题】：Parsley.JS form validation not workingParsley.JS 表单验证不起作用
【发布时间】：2014-12-30 19:44:46
【问题描述】：

我正在尝试使用简单形式的parsley.js 验证，但无法正常工作。我的 CDN 工作正常，但我没有得到任何验证。代码是：

<!doctype html>
<html>
<head>
      <title>Parsley.js form validation</title>
      <script src="js/bootstrap.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.6/parsley.min.js"></script>
      <link rel="stylesheet"type="text/css"href="css/bootstrap.min.css">
      <script>
          $('.parsley-validate').parsley();
      </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <h2>Parsley.JS</h2>
            <form role="form" class="parsley-validate" data-validate="parsley">
                <label>Name</label>
                <input type="text" class="form-control" name="name" data-parsley-required="true"><br/>
                <label>Email</label>
                <input type="text" class="form-control" name="name" data-parsley-required="true" data-parsley-type="email" data-parsley-trigger="change" /><br/>
                <label>Website</label>
                <input type="text" name="name" class="form-control" data-parsley-required="true" data-parsley-type="url" data-parsley-trigger="change" /><br/>
                <input type="button" value="submit" class="btn btn-success"/>
            </form>
        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

“不工作”是什么意思？有什么错误吗？
您在表单存在之前在<head> 中调用$('.parsley-validate').parsley();。将脚本移动到 <body> 的末尾或将其包装在准备好的文档中 - $(function(){ $('.parsley-validate').parsley(); })
总是为 javascript 代码使用 DOM Ready 事件。如果你不这样做，这总是会导致问题。

标签： javascript jquery forms validation parsley.js

【解决方案1】：

在表单存在之前，您在<head> 中调用$('.parsley-validate').parsley();。将脚本移动到<body> 的末尾或将其包装在准备好的文档中：

<script>
$(function(){          
   $('.parsley-validate').parsley();
})
</script>

【讨论】：

【解决方案2】：

我认为您不需要使用数据标签来验证您是否正在调用$('.parsley-validate').parsley();。查看文档本节下的警告：Parsley.js Javascript Installation

编辑：我应该更具体一点，在使用$('.parsley-validate').parsley() 时，您不需要form 上的data-validate='parsley。这就是上面的链接所指出的。当然，您仍然可以在元素上使用数据标签来定义验证。

【讨论】：

数据标签定义验证规则。问题在于元素存在之前的函数调用