为什么在使用parsley（）。reset（）之后未设置表单？并仍显示验证器

Question

[我正在使用ParsleyJs验证下面显示的表单，我一直试图通过单击“重置”按钮来调用Reset（）函数来重置表单，并且我已经在表单提交时使用isValid（）而不是从数据中验证了表单-香菜验证形式。使用（#formid）.parsley（）。reset（）;之后在Reset（）函数中，表单将重置所有字段，但仍显示验证器说“此字段是必需的”，我在ParsleyJs文档中未发现任何问题。

<form id="Person" class="form-horizontal form-label-left">
    <div>
        <input id="id" type="hidden" name="id">
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3 label-align" for="firstname">
            First Name
        </label>
        <div class="col-md-6 col-sm-6 ">
            <input type="text" id="firstname" data-parsley-pattern="[a-zA-Z]{3,30}" name="name" class="form-control" data-parsley-trigger="focusout" required>
        </div>
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3 label-align" for="lastname">
            Last Name
        </label>
        <div class="col-md-6 col-sm-6">
            <input type="text" id="lastname" data-parsley-pattern="[a-zA-Z]{3,30}" name="name" required data-parsley-trigger="focusout" class="form-control" />
        </div>
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3  label-align" for="phone">
            Phone
        </label>
        <div class="col-md-6 col-sm-6">
            <input class="form-control" type="tel" id="phone" name="phone" required="required" data-parsley-pattern="^\d{10}$" data-parsley-maxlength="10" data-parsley-trigger="focusout" />
        </div>
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3 label-align" for="taddress">
            Address
        </label>
        <div class="col-md-6 col-sm-6 ">
            <textarea class="form-control" id="address" name="address" rows="3" data-parsley-trigger="focusout" required></textarea>
        </div>
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3  label-align" for="dob">
            Date of Birth
        </label>
        <div class="col-md-6 col-sm-6">
            <input class="form-control" id="dob" type="date" name="date" data-parsley-trigger="focusout" min="1900-01-01" max="2020-01-30" pattern="\d{4}-\d{2}-\d{2}" required />
        </div>
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3  label-align">
            Email
        </label>
        <div class="col-md-6 col-sm-6">
            <input class="form-control" id="email" name="email" required type="email" data-parsley-trigger="focusout" />
        </div>
    </div>
    <div class="field item form-group">
        <label class="col-form-label col-md-3 col-sm-3  label-align" for="ssn">
            SSN
        </label>
        <div class="col-md-6 col-sm-6">
            <input class="form-control" pattern="^\d{9}$" id="ssn" type="number" name="ssn" required data-parsley-maxlength="9" data-parsley-trigger="focusout" />
        </div>
    </div>
    <div class="">
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="Reset()" data-dismiss="modal">Close</button>
            <br />
            <button class="btn btn-primary" id="btnReset" onclick="Reset()">Reset</button>
            <br />
            <button type="submit" id="btnSubmit" value="validate" class="btn btn-success">Submit</button>
        </div>
    </div>
</form>

下面显示的是重置功能

 function Reset() {
            $("#Person")[0].reset();
            $('#Person').parsley().reset();
        }

Answer 1

您的button是一个提交按钮！因此，重置后它会再次验证您的表单...

要使其设为not a submit button，请使用<button type="button" ...>。

或者，您可以在return false中输入onclick，或将其更改为<div>，或将其置于表格之外。