Проверьте наличие изменений в 2 входах и кнопку включения - PullRequest
0 голосов
/ 11 марта 2020

У меня есть форма с серией радио пунктов. Если пользователь выбирает указанную запись c на одном из элементов радио (отсутствующий элемент), я использую JQuery, чтобы добавить класс bootstrap is invalid для двух указанных c входов в форме вместе с меткой, запрашивающей чтобы добавить детали и отключить кнопку отправки, чтобы остановить отправку формы.

$(function () {
$("input[name=optradio]:radio").click(function () {
  if ($('input[name=optradio]:checked').val() == "2") {
      $('textarea[name=sentTo]').addClass('is-invalid');
      $('input[name=dateSent]').addClass('is-invalid');
      $('#removedMSG').text("You must update this field prior to saving");
      $('#removedMSG2').text("You must update this field prior to saving");
      $('#submit').prop('disabled', true);
  } else {
      $('textarea[name=sentTo]').removeClass('is-invalid');
      $('input[name=dateSent]').removeClass('is-invalid');
      $('#submit').prop('disabled', false);
  }
});
});

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

Я знаю, что могу использовать следующее для проверки изменений ввода

$("textarea[name=sentTo]").on("input", function(){
   $('textarea[name=sentTo]').removeClass('is-invalid');
});

Это прекрасно работает. Однако я не знаю, как интегрировать все это вместе:

Таким образом, пользователь обычно выбирает радио, недопустимый объект добавляется в 2 поля ввода, а кнопка отправки отключается - пользователь заполняет 2 поля по мере необходимости и только тогда, когда оба поля были обновлены, после чего мы снова активируем кнопку отправки.

Я думаю, что мне нужно утверждение if, но я не могу понять, что код правильный.

Я пытался

if `$("textarea[name=sentTo]").on("input") && $("textarea[name=dateSent]").on("input")` 

но это не работает

Благодаря Мамум я использую код ниже.

$(function () {
$('input[name=optradio]:radio').click(function () {
  if ($('input[name=optradio]:checked').val() == "2") {
      $('textarea[name=sentTo]').addClass('is-invalid');
      $('input[name=dateSent]').addClass('is-invalid');
      $('#removedMSG').text("You must update this field prior to saving");
      $('#removedMSG2').text("You must update this field prior to saving");
      $('#submit').prop('disabled', true);
      $('#submit').addClass('btn-danger');
      $('#submit').removeClass('btn-primary');
  } else {
      $('textarea[name=sentTo]').removeClass('is-invalid');
      $('input[name=dateSent]').removeClass('is-invalid');
      $('#submit').prop('disabled', false);
      $('#submit').addClass('btn-primary');
      $('#submit').removeClass('btn-danger');
  }
 });
});

var sentTo = false;
var dateSent = false;
$("textarea[name=sentTo], input[name=dateSent]").on("input", function(){
if($(this).attr('name') == 'sentTo') {
  sentTo = true;
  $(this).removeClass('is-invalid');
}
if($(this).attr('name') == 'dateSent') {
  dateSent = true;
  $(this).removeClass('is-invalid');
}
if(sentTo && dateSent){
  $('#submit').prop('disabled', false);
  $('#submit').addClass('btn-primary');
  $('#submit').removeClass('btn-danger');
}
});

1 Ответ

1 голос
/ 11 марта 2020

Вы можете передать несколько селекторов через запятую и использовать ключевое слово this для ссылки на текущий элемент внутри функции обработчика событий:

var sentTo = dateSent = false;
$("textarea[name=sentTo], textarea[name=dateSent]").on("input", function(){
  if($(this).attr('name') == 'sentTo') sentTo = true;    //true for sentTo
  if($(this).attr('name') == 'dateSent') dateSent = true;//true for dateSent
  if(sentTo && dateSent){  // if both are true
    $(this).removeClass('is-invalid');
    sentTo = dateSent = false;
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...