Why the form is not setting after using parsley().reset(); and still showing validators

Question

I am Using ParsleyJs to validate below shown form, I have been trying to reset the form by calling Reset() function on click of Reset button and i have validated the form using isValid() on form submission and not from the data-parsley-validate in form. After using (#formid).parsley().reset(); in Reset() function the form resets all it's fields but still shows the validator saying "this field is required", i have not found any soution in ParsleyJs documentation.

<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>

Below shown is the Reset function

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

Answer 1

Your button is a submit button! So it validates again your form after the reset...

To make it not a submit button use <button type="button" ...>.

Alternatively you could return false in your onclick, or change it to a <div>, or put it outside the form.