Подтвердить что ты не робот

Кнопка "Показать", когда действуют определенные входы

У меня есть HTML-форма с несколькими входами. У некоторых есть класс required.

Я хочу показать кнопку "отправить", когда все эти поля имеют значение.

Я попытался использовать:

$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        if($(this).val() !== "") {
            $("#submit_button").show();
        } else {
            $("#submit_button").hide();
        }
    });
});

но это показывает кнопку, если только один вход не пуст.

Возможно ли это сделать для нескольких входов, если все входы с классом required не пусты?

Функция CheckRequired

function CheckRequired(event) {
    var $form = $(this);

    var emptyElements = $form.find('.required').filter(function() {
        return this.value === ''
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");

        event.stopImmediatePropagation();
        return false;
    }
}
4b9b3361

ОТВЕТЫ

Ответ 1

Вы должны проверить все необходимые данные на keyup с помощью цикла:

<script type="text/javascript">
$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        var showBtn = true;
        // Check all inputs
        $('.required').each(function () {
            showBtn = showBtn && ($(this).val() !== "");
        }
        // Hide or show the button according to the boolean value
        $("#submit_button").toggle(showBtn);
    });
});
</script>

Ответ 2

Логика проста:

  • Предположим, мы покажем кнопку.
  • Посмотрите на каждый требуемый ввод.
  • Если какой-либо из них пуст, нам нужно скрыть кнопку, и вам не нужно проверять какие-либо входы.

И не просто смотреть keyup. Это не будет захватывать данные, вставленные с помощью мыши/и т.д. Я также смотрел бы change и blur, чтобы быть в безопасности.

$(document).ready(function() {
  // show submit button *only* when all
  // .required fields have a value
  //
  var checkRequired = function() {
    var allValid = true;   // assume we're ready

    $('.required').each(
      function() {
        if (this.value.trim() === "") {
          // fail as soon as we hit an empty field
          allValid = false;
          return false;    // this ends the each() loop
        }
      }
    );

    $('#submit_button').toggle(allValid);
  }

  $('.required').bind('keyup change blur', checkRequired);
  
  checkRequired();  // start off in a correct state
});
.required {
  border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" class="required" />
  <input type="text" />
  <input type="text" class="required" />
  <input type=submit id=submit_button value="Submit" />
</form>

Ответ 3

Попробуйте вот так:

<script type="text/javascript">
  $(document).ready(function() {
    $("#submit_button").hide();

  $('.required').each('keyup', function () {
    if($(this).val() !== "") {
        $("#submit_button").show();
    } else {
        $("#submit_button").hide();
    }
  });
});
</script>

Ответ 4

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var flag = true;
            $('.required').keyup(function () {
                $('.required').each(function (index, responce) {
                    if ($(this).val() == "") {
                        flag = false;
                        return;
                    }
                    else {
                        flag = true;
                    }
                });
                if (flag == true) {
                    $('#submit').show();
                }
                else {
                    $('#submit').hide();
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="submit" id="submit" style="display:none;" />
</body>

</html>

Ответ 5

Пользователи обычно не получают доступ к нескольким элементам управления одновременно. Что еще более важно, события обрабатываются по одному за раз. Таким образом, вы можете просто использовать счетчик, чтобы проверить, были ли заполнены все обязательные поля, без необходимости проверять все поля в каждом событии keyup. Вам просто нужно отслеживать, было ли поле действительным до этого, чтобы не испортить счетчик. Вот эффективное и эффективное решение:

<script type="text/javascript">
$(document).ready(function() {
    var button = $('#submit_button');
    var required = $('.required');
    var counter = 0;
    var trigger = required.length;
    button.hide();

    required.on('keyup', function () {
        var self = $(this);
        if(self.val() !== '') {
            if (!self.data('valid') && ++counter === trigger) button.show();
            self.data('valid', true);
        } else {
            if (self.data('valid')) --counter;
            button.hide();
            self.data('valid', false);
        }
    });
});
</script>

Fiddle: https://jsfiddle.net/fa1LsLfh/1

Ответ 6

Можете ли вы попробовать этот код. Он будет работать для вас

$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {                    
           ToggleSubmitButton();
    }); 
});

function ToggleSubmitButton()
{
    $("#submit_button").hide();
    var getRequiredLength = $('.required').length;
    var nonempty = $('.required').filter(function() {
        return this.value != ''
    }).length;

    if(getRequiredLength ==  nonempty){
        $("#submit_button").show();
    }

}

Ответ 7

Если ваши входы действительно required, вы можете использовать недопустимый псевдокласс для извлечения всех обязательных полей, которые пусты, если длина этой коллекции равна < 1, вы знаете, что все обязательные поля заполнены. Если они получили только необходимый класс, вы можете использовать JS для установки свойства. Это также работает для всех других проверенных полей, таких как поля электронной почты или прочее, поэтому я бы предпочел этот метод. Вот пример того, как он работает:

jQuery(document).ready(function() {
  jQuery('#testform input').on('keyup', function() {
    if(jQuery('#testform input:invalid').length < 1)
      {
        jQuery('#testform .dependend_submit').show();
       }
    else
      {
        jQuery('#testform .dependend_submit').hide();
      }
  });
});
.dependend_submit {display: none;}
input {display: block;}
input:required {border-left: 1px solid red;}
input:not(:required) {border-left: 1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testform">
  <input type="text" name="text1" required="required" />
  <input type="text" name="text2" required="required" />
  <input type="text" name="text3" />
  <input type="text" name="text4" required="required" />
  <input type="text" name="text5" required="required" />
  <input type="submit" name="submit" value="submit" class="dependend_submit" />

Ответ 8

Я только наткнулся на этот вопрос. Позвольте мне добавить еще один подход, чтобы справиться с этим.

HTML

<form>
  <input type="text" name="a" value="" required>
  <input type="text" name="b" value="" required>
  <input type="submit" id="submit_button" disabled>
</form>

CSS

#submit_button {
  display: none;
}

#submit_button.active {
  display: inline;
}

JavaScript

var submit = $('#submit_button'),
    required = $('input[required]');

required.on('keyup', function() {
    if (0 == required.filter(function() { return '' == this.value; }).length) {
        submit.addClass('active').prop('disabled', false);
    }
});

Как это работает

  • Кнопка отправки скрыта по умолчанию с помощью CSS. Это позволяет избежать короткого мигания при загрузке страницы. Это также disabled.
  • Необходимые поля ввода имеют атрибут required, который также может отображать информацию о проверке браузера, если вход пуст. Это альтернатива использованию класса .required. Вы все равно можете изменить селектор от input[required] до .required, конечно.
  • Кнопка "Отправить", а также все обязательные поля сохраняются в переменных (submit и required). Это делается для того, чтобы избежать повторного запроса на каждый обработчик события keyup.
  • Наконец, на каждом keyup ранее выбранные входы фильтруются для пустых value s. Если результат пуст (0 == list.length), кнопка отображается добавлением класса CSS active (может быть названа enabled или аналогичным, как, конечно,). Это имеет то преимущество, что вы можете легко добавлять такие вещи, как переход и т.д. Это также улучшает развязку ваших CSS и JavaScript.

Заключительные мысли

Использование keyup может работать только с текстовыми вводами. Если у вас есть другие входы, которые вы хотите отслеживать, например флажки, выберите раскрывающийся список и т.д., Вы можете подумать об использовании .on('input change') только на form.

Вы также можете отключить и скрыть кнопку, если поле снова станет пустым, например:

if (0 == required.filter(function() { return '' == this.value; }).length) {
  submit.addClass('active').prop('disabled', false);
} else {
  submit.removeClass('active').prop('disabled', true);
}

Demo

Попробуйте перед покупкой