Question

我正在使用parsley.js 2.0.2。用于客户端表单验证。

现在我在Parsley Website注意到parsley 2.x有动态表单验证。我的页面上有一份欧芹表格。它工作正常并确实有效。现在在同一页面上，我有一个动态添加外部文件表单的链接。问题是现在parsley.js不会验证新添加的表单。

在欧芹网站上，他们有一个例子，可以使用JavaScript进行验证但我尝试了它并且它不起作用。以下是示例的代码段：

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

   <form id="form">
   ...
   </form>

   <script type="text/javascript">
       $('#form').parsley();
    </script>

我知道DOM中的内容发生了变化，但有没有办法告诉欧芹验证这个新添加的表单或者会触发验证过程？

我将非常感谢您的帮助！感谢

这是index.php页面上的表单（此表单已成功验证）：

<form action="server.php" method="post" name="main-form" id="myForm" data-parsley-validate>
<div>
   <label for="njsform-name">Name</label>
   <input name="name" type="text" id="njsform-name" placeholder="Mike" data-parsley-required="true" data-parsley-minlength="2">
</div>
<div>
   <label for="njsform-email">Surname</label>
   <input name="email" type="text" id="njsform-email" placeholder="Gates" data-parsley-required="true" parsley-minlength="2">
</div>
<div class="submitWrap">
   <input class="submit" type="submit" value="Apply Now" />
</div>

以下是获取外部内容的链接

<ul class="services-list">
     <li><a class="s-option" href="views/form-short_term_loans.php">My Link</a></li>
</ul>

以下是我用来动态更改内容的代码（成功检索外部表单并填充）：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.services-list li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #form-section';
            $('#form-section').load(toLoad)
        }                                           
    });

    $('.services-list li a').click(function(){                                
        var toLoad = $(this).attr('href')+' #form-section';
        $('#form-section').hide('fast',loadContent);
        $('#load').remove();
        $('#intro-section').append('<span id="load">Getting required form...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#form-section').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#form-section').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

第二种形式只是重复但形式ID是 myForm2 ，名称第二种形式

Answer 1

添加对

的调用

 $('#xxxxxx').parsley();

加载新表格后。使用 xxxxx 插入DOM中的新表单的ID

如何将Parsley.js与动态内容一起使用

1 个答案: