Parsley 验证在表单加载并显示错误时立即开始

Posted 2023-05-09

【中文标题】Parsley 验证在表单加载并显示错误时立即开始

【英文标题】：Parsley validation starts immediately when form loads and shows errors

【发布时间】：2018-12-20 11:09:34

【问题描述】：

。 我怎样才能在一开始就防止这种情况发生？

这是我的代码：

更新：添加了 html 我通过将 data-parsley-validate="" 添加到表单标签来添加验证。当我使用 parsley() 函数时需要这个吗？哪种方式更好？

// Activate validation
$("#form_register").parsley();

// On validation
$('#form_register').parsley().whenValidate().done(function() 
    $("#form_register").submit();
);

// Validate when submit button clicked
$('#form_register .btn-submit').click(function()
    $('#form_register').parsley().validate();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/guillaumepotier/Parsley.js/2.8.1/dist/parsley.js"></script>
<form id="form_register" method="post" data-parsley-validate="">
<label for="username">usename :</label>
<input type="text" name="username" id="username" class="form-control" autocomplete="username" requireddata-parsley-remote="register/ajax_username_exists/value" data-parsley-remote-reverse="true">
<label for="password">Password :</label>
<input type="password" name="password" id="password" class="form-control" autocomplete="new-password" required pattern="(?=^.8,$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" >
<label for="repassword">Password again:</label>
<input type="password" name="repassword" id="repassword" class="form-control" required autocomplete="new-password" data-parsley-equalto="#password" >
<label for="first_name">First Name :</label>
<input type="text" name="first_name" id="first_name" class="form-control" autocomplete="name">
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" class="form-control" autocomplete="family-name">
<label for="mobile_number">Mobile :</label>
<input type="text" name="mobile_number" id="mobile_number" class="form-control" autocomplete="mobile" pattern="^09\d9$" >
<label for="phone_number">Phone :</label>
<input type="text" name="phone_number" id="phone_number" class="form-control" autocomplete="tel" pattern="^\d8,12$" >
<label for="address">Address :</label>
<input type="text" name="address" id="address" class="form-control" autocomplete="street-address">
<label for="date_birth">Birth Date:</label>
<input type="text" name="date_birth" id="date_birth" class="form-control" autocomplete="bday" placeholder="0000-00-00" pattern="^\d4-\d1,2-\d1,2$"  value="1975-01-01">
<input type="button" value="Register" class="btn btn-primary btn-submit">
</form>

【问题讨论】：

你能把表格贴出来吗？

我添加了表格

让我检查一下表格并发布答案。

【参考方案1】：

如果您需要示例中所示的基本验证，则无需像 field:validated 那样担心 events。您可以简单地调用validate() 函数，它会在提交之前验证您的表单。

您必须如下更改提交按钮，以便在验证成功时提交表单。 （将类型改为"submit"，而不是"button"）

<input type="submit" value="Register" class="btn btn-primary btn-submit" />

然后删除所有 javascript 代码并仅保留以下内容。

$('#form_register .btn-submit').click(function()
    $('#form_register').parsley().validate();
);

这将在您提交表单时执行验证，当它成功时，它将提交表单。

这是一个小提琴：https://jsfiddle.net/nimeshka/nx4aLthp/38/

希望对你有帮助:)

【讨论】：

这在我不使用 ajax 时非常有效。如果我添加一个 $('form').submit() 表单将被提交，即使验证失败！

@rostamiani 随时询问您是否需要任何帮助。

谢谢。这是一个新问题并在这里提出：***.com/questions/51345227/…