使用 parsley.js 验证表单提交外部表单标记

Posted 2023-05-09

【中文标题】使用 parsley.js 验证表单提交外部表单标记

【英文标题】：validate a form using parsley.js submit outside form tag

【发布时间】：2020-08-27 18:21:19

【问题描述】：

我有这种情况，我想用 parsley.js 验证这段代码。现在我想在模态框内创建一个动态表单，这是一个可重用的模态框，在表单标签之外有按钮/提交。如何使用 parsley.js 验证这种情况？

这就是我的意思，我有一个这样的场景，这是用我的按钮分隔的文件：

    <form action="" method="POST" class="add_edit_job" id="<?php if($edit == 'yes')?>edit_jobs<?php else?>post_jobs<?php ?>" data-parsley-validate="true">

    <input type="text" class="form-control" name="position" value="<?php echo $position?>" 
                 data-parsley-required/>
    <input type="text" class="form-control" name="location" value="<?php echo $location?>" 
                 data-parsley-required data-parsley-type="alphanum"/>
    <input type="text" class="form-control" name="number" value="<?php echo $number?>" 
                 data-parsley-required data-parsley-type="integer"/>
   </form>

然后我的按钮在表单之外，因为我的按钮在模板中，我的模态如下：

<input type="button" class="btn btn-sm btn-success save_data" value="Save">

我尝试以这种方式执行此操作，但我实际上不知道如何提交此表单并使用 parsley.js 对其进行验证。我想触发表单提交，但它只会刷新我的页面并且什么都不做。

$(document).ready(function() 
   $('.add_edit_job').parsley();
); 

$('.save_data').click(function(e)  
    $('.add_edit_job').submit(); 
    console.log("clicked");
);

【参考方案1】：

其他事情正在发生，因为你在做什么works for a simple case

This is bogus code because *** is starting
to be kind of restrictive and wants that
"Links to codepen.io must be accompanied by code."

【讨论】：

感谢您的示例。我不知道为什么当我 $('.add_edit_job').submit(); 时我的页面会刷新。我试图把preventDefault。我还在你的 codepen 中尝试了我的场景，它确实有效