Почему форма не устанавливается после использования parsley (). Reset (); и до сих пор показывает валидаторы - PullRequest
Новая
       66

Почему форма не устанавливается после использования parsley (). Reset (); и до сих пор показывает валидаторы

0 голосов
/ 23 февраля 2020

Я использую петрушку Js для проверки показанной ниже формы. Я пытался сбросить форму, вызывая функцию Reset () по нажатию кнопки «Сброс», и я подтвердил форму, используя isValid () при отправке формы, а не из данных петрушка-проверить в форме. После использования (#formid) .parsley (). Reset (); в функции Reset () форма сбрасывает все свои поля, но все еще показывает валидатор, говорящий «это поле обязательно для заполнения», я не нашел ни одной ссылки в документации Parsley Js. 

<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();
        }

1 Ответ

0 голосов
/ 24 февраля 2020

Ваш button - кнопка отправки! Таким образом, он снова проверяет вашу форму после сброса ...

Чтобы сделать ее не кнопкой отправки , используйте <button type="button" ...>.

В качестве альтернативы вы можете return false в вашем onclick, или изменить его на <div>, или поставить его вне формы.

...