Bootstrap недопустим и действителен, не работает правильно с ajax

Question

Я использую php-фрейм codeigniter для работы с ajax.

Когда я отправляю свою форму через ajax и возникает ошибка формы, цвета ввода меняются.

Как бы то ни было, потому что ввод имени пользователя пользовательских агентов содержит все готовое полученное значение.Он меняется на зеленый, как на этом рисунке ниже

Но когда я добавляю это

if ($('#input-' + key).length >= 1) {
    $('#input-' + key).val($('#input-' + key).val());
    $('#input-' + key).removeClass('is-invalid');
}

Он удаляет другие входные данные формы is-invalid Он должен удалять только те, которые имеют установленное значение, КАК ПОКАЗАНОВ ИЗОБРАЖЕНИИ ВНИЗ *

Вопрос Как я могу убедиться, что если вход имеет заданное значение, то класс is-invalid изменится на is-valid, но другой пустой класс ввода is-invalid будетОставайтесь на связи.

<script type="text/javascript">
$( document ).ready(function() {
    $('#error').html(" ");

    $('#form-submit-button').on('click', function (e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "<?php echo site_url('agent/register/validate');?>", 
            data: $("#agent-register-form").serialize(),
            dataType: "json",  
            success: function(data){
                $.each(data, function(key, value) {
                    $('#input-' + key).addClass('is-invalid');

                    if ($('#input-' + key).length >= 1) {
                        $('#input-' + key).val($('#input-' + key).val());
                        $('#input-' + key).removeClass('is-invalid');
                    }

                    $('#input-' + key).parents('.form-group').find('#error').html(value);
                });
            }
        });
    });

    $('#agent-register-form input').on('keyup', function () { 
        $(this).removeClass('is-invalid').addClass('is-valid');
        $(this).parents('.form-group').find('#error').html(" ");
    });
});
</script>

Answer 1

Теперь решена проблема с неправильной проверкой каждой детали, которую необходимо добавить, если указано ниже.

if (data['error'] == true) {

    $.each(data, function(key, value) {
        if (value === ""){
             $('#input-' + key).addClass('is-valid'); 
        } else {
             $('#input-' + key).addClass('is-invalid');
        }
    });

}

Answer 2

Пожалуйста, проверьте добавление этого кода в вашу функцию успеха вызова ajax.

< script type = "text/javascript" >
  $(document).ready(function() {
    $('#error').html(" ");

    $('#form-submit-button').on('click', function(e) {
      e.preventDefault();

      $.ajax({
        type: "POST",
        url: "<?php echo site_url('agent/register/validate');?>",
        data: $("#agent-register-form").serialize(),
        dataType: "json",
        success: function(data) {
          $.each(data, function(key, value) {
            $('#input-' + key).addClass('is-invalid');

            if ($('#input-' + key).val().length >= 1) {
              $('#input-' + key).removeClass('is-invalid');
            }

            $('#input-' + key).parents('.form-group').find('#error').html(value);
          });
        }
      });
    });

    $('#agent-register-form input').on('keyup', function() {
      $(this).removeClass('is-invalid').addClass('is-valid');
      $(this).parents('.form-group').find('#error').html(" ");
    });
  }); <
/script>