Включать элемент только после заполнения всех полей ввода. Многоразовая функция - PullRequest
Новая
       72

Включать элемент только после заполнения всех полей ввода. Многоразовая функция

0 голосов
/ 14 июля 2020

Я пытаюсь написать функцию многократного использования, которая перебирает все поля ввода, если какие-либо из них пусты. Я хочу, чтобы другой элемент (href или кнопка) переключал имя класса (отключено).

В настоящее время это работает на первом входе, но не на втором, я думаю, это относится к селектору jquery.

JS: 

const toggleElem = () => {
    const parent = $('.fileUploader--videos');
    const $input = parent.find('[type="text"]'); // I think this is the issue
    const $wrapper = parent.find('.fileUploader-wrapper');
    const visibleClass = 'visible';
    $input.on('change input', () => {
        toggleElemValidInput($input, $wrapper, visibleClass);
    });
};

toggleElem();

const toggleElemValidInput = (input, elem, className) => {
    input.each(function() {
        if ($(this).val() !== '') {
        // also would prefer if ($(this).val().length !== 0)
            elem.addClass(className);
        } else {
            elem.removeClass(className);
        }
    });
};

HTML: 

<div class="fileUploader col fileUploader--videos hasAdvancedUpload" data-action="/api/v1/ProductMediaVideoUploadApi" data-method="post">
  <label for="videoTitle" class="mb-3">
    <input type="text" name="videoTitle" value="" class="form-control" placeholder="Add video title" autocomplete="off">
  </label>
  <label for="videoUrl" class="mb-3">
    <input type="text" name="videoUrl" value="" class="form-control" placeholder="Add video url" autocomplete="off">
  </label>
  <i class="fileUploader__icon fa fa-film"></i>
  <div class="fileUploader__input">
    <input class="fileUploader__file" type="file" name="file-videos" id="file-videos" accept="image/x-png,image/gif,image/jpeg">
    <label for="file-videos">Click to add a video thumbnail</label>
    <p class="fileUploader__dragndrop"> or drag it here</p>
    <ul class="small">
      <li>File formats: </li>
      <li>File size: <span class="file-size-max"></span></li>
    </ul>
  </div>
  <div class="fileUploader__uploading">Uploading...</div>
  <div class="fileUploader__success">Complete</div>
  <div class="fileUploader__error">Error. <span></span></div>
  <a href="#" class="fileUploader__restart fa fa-redo-alt"></a>
  <div class="fileUploader-wrapper mt-3 text-right">
    <a href="#" class="btn btn-primary btn-submit">Submit</a>
  </div>
</div>

Я сделал здесь скрипку: https://jsfiddle.net/lharby/zygw72pr/

Я вроде понимаю, что создаю эту функцию и ориентируюсь только на один селектор, но моя цель - сделать его многоразовым, и он не должен не важно, 1 вход или 100.

TIA

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Отфильтровать все текстовые поля. Когда пустых нет, установите класс видимым. 

var query = "input[type=\"text\"]";

$(query).on("input change", () =>
{
  if($(query).filter((a, b) => $(b).val().length == 0).length == 0)
       $(".fileUploader-wrapper").addClass("visible");
  else
       $(".fileUploader-wrapper").removeClass("visible");
});
0 голосов
/ 14 июля 2020

Проблема в том, что переключение класса зависит только от последнего ввода в коллекции, как вы записали его в l oop вот так.

Вы можете использовать filter(), чтобы получить набор пустых (если есть) и использования этой длины коллекции для определения переключения класса.

Использование toggleClass() с его вторым логическим аргументом также проще, чем запись обоих addClass() и removeClass() в условных

Примерно так: 

const toggleElemValidInput = (input, elem, className) => {
    const hasEmpty = !!input.filter((i,el) => !el.value.trim()).length;
    elem.toggleClass(className, hasEmpty);
};
...