Bootstrap валидатор для модального не сбрасывает форму

Question

Я использую валидатор начальной загрузки для моей формы в модале. Валидатор сохраняется при последующем доступе к форме. Например, если сделать следующую операцию

1. В форме доступа введите допустимое значение и отправьте форму.

2. Обратитесь к форме еще раз, цвет поля по-прежнему остается зеленым, так как я ввел правильную запись в моей предыдущей отправке формы

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       <h4 class="modal-title" id="myModalLabel">Add new Node</h4>
     </div>
      <div class="modal-body">
       <div class="modal-body">
           <form role="form" id="addNodeForm">
             <div class="form-group">
               <label for="nodename" class="control-label">Node Name</label>
               <input type="text" name="nodename" class="form-control" id="nodename" required>
             </div>
   
           </form>
      </div>
     <!--  <div class="alert alert-success">
           <a href="#" class="close" data-dismiss="alert">&times;</a>
           <div id="thanks"></div>
       </div> -->
    </div>
    <div class="modal-footer">
     <button type="button" id="add-close" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" id="add-save" class="btn btn-primary">Save changes</button>
    </div>
   </div>
   

           $('#myModal').on('hidden.bs.modal', function(){
               $(this).removeData('bs.modal');
               $('#nodename').val("");
               $('#addNodeForm').bootstrapValidator('resetForm', true);
           });
   
           $('#myModal').on('show.bs.modal', function () {
                // $('#addNodeForm').bootstrapValidator('resetForm', true);
               $(this).removeData('bs.modal');
               $('#addNodeForm').bootstrapValidator('resetForm', true);
                 $.ajax(
                        {
                            url: "node/getnodelist",
                            type: "GET",
                            success:function(text) 
                            {
                                alert(text);
                               nodelist = text;
                            },
                            error: function(jqXHR, textStatus, errorThrown) 
                            {
                                //if fails      
                            }
                        });
               });
   
           $('#addNodeForm').bootstrapValidator({
               feedbackIcons: {
                   valid: 'glyphicon glyphicon-ok',
                   invalid: 'glyphicon glyphicon-remove',
                   validating: 'glyphicon glyphicon-refresh'
               },
               fields: {
                   nodename: {
                       validators: {
                           notEmpty: {
                               message: 'Function name is required'
                           }
                       }
                   }
               }
           });
   

Answer 1

Попробуйте следующий код:

$('#contactform').bootstrapValidator('resetForm', true);

Answer 2

hidden.bs.modal Событие вызывается, когда модал завершил скрытие от пользователя, поэтому форма будет скрыта, а BoostarpValidator по умолчанию не обрабатывает и не проверяет скрытые поля.

Поэтому, чтобы сбросить форму, когда модал скрыт, вы должны добавить:

excluded: ':disabled'

на ваш код JS.

Живой пример: http://jsfiddle.net/Arkni/ndpv76bk/

Ссылка:

• excluded документы: http://bootstrapvalidator.com/settings/

РЕДАКТИРОВАТЬ

Ваша инициализация bootstrapValidator в вашей форме должна быть похожа на следующую после добавления excluded опция:

    $('#addNodeForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded: ':disabled',   // <=== Adding the 'excluded' option
        fields: {
            nodename: {
                validators: {
                    notEmpty: {
                        message: 'Function name is required'
                    }
                }
            }
        }
    });

Answer 3

В bootstrap 5 просто удалите класс CSS "was-validated" из элемента формы.

Answer 4

Сбросьте форму, когда модальное окно будет скрыто

$("#addUserModal").on('hide.bs.modal', function(){
  $("#userForm")[0].reset();
  $('#userForm').bootstrapValidator('resetForm', true);
});

Answer 5

Попробуйте код ниже, на какой подстанции вы хотите сбросить форму.

 $('#addNodeForm').trigger("reset");

Answer 6

Функция reset() сбросит вашу форму, а не ошибку проверки начальной загрузки.

Итак, что нам нужно сделать, просто сообщить форме, что ваша форма свежая, удалить из формы было подтверждено. Как показано ниже.

       document.getElementsByClassName('needs-validation')[0].classList.remove("was-validated")