Заставить только целевой li исчезать / появляться при изменении поля?

ProgramBox

Заставить только целевой li исчезать / появляться при изменении поля?

Post author:admin
Запись опубликована:12 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #validation

#javascript #jquery #проверка

Вопрос:

При первом посещении скрипки и нажатии «Продолжить» вверху появляется список с собранными сообщениями об ошибках проверки.

Если вы введете в поле First Name соответствующее «1. Введите свое имя» должно исчезнуть (и должно появиться снова, когда поле первого имени пусто). То же самое действие должно произойти для других допустимых полей на странице — если недопустимо, li должно появиться уведомление об элементе. Когда поле имеет входные данные, уведомление (и номер) должны исчезнуть.

Но когда затрагивается одно поле, весь список исчезает. Что является причиной этого? Как бы я изменил свой jQuery, чтобы настроить таргетинг только на один соответствующий элемент (и номер) в списке, а не на весь список?

(Отображение: нет / отображение: встроенное в метках ошибок генерируется проверкой jQuery)

 <ol class="error-message-container error-menu">
        <li><a href="#firstName"><label class="error" for="firstName" generated="true"></label></a></li>
        <li><a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>

$('input, ul.dropdown-menu li, .form-inline').on('change', function() {
  if($('li a label').css('display') == 'none'){ 
    $('.error-menu li a label').closest('li').hide('slow'); 
  } else { 
    $('.error-menu li a label').closest('li').show('slow'); 
  }
});

Пробовал это, но это явно не работает. Как я могу это изменить?

 $('input, ul.dropdown-menu li, .form-inline').on('change', function() {
   var labelCheck = $('.error-menu li a label');
  if($(labelCheck).css('display') == 'none'){ 
    $(this).closest('li').hide('slow'); 
  } else { 
    $(this).closest('li').show('slow'); 
  }
});

Скрипка: https://jsfiddle.net/DTcHh/25922 /

1. Вы должны использовать обход DOM относительно $(this) , чтобы влиять только на целевой LI.

2. Спасибо. Пожалуйста, посмотрите мою правку. Я знаю, что я далеко, но пытаюсь понять это.

3. labelCheck не относится к $(this) .

4. Если вы используете плагин проверки, почему бы вам не использовать его методы для изменения стиля метки?

5. ошибка save_page не определена

Ответ №1:

Всякий раз, когда вы изменяете или модифицируете поле ввода или выбора, плагину может быть запрошена проверка. Если результат «форма действительна», вы можете скрыть меню ошибок. В противном случае таким образом вы запускаете событие invalidHandler для средства проверки. Внутри этого события вы можете скрыть допустимые поля.

Итак, вы можете свести все к этой функции:

 $('input, select').on('input change', function() {
    if ($("#form-jsvalidate").valid()) {
        $('.error-menu li').hide();
    }
});

И внутри $(«#form-jsvalidate»).validate({ вам нужно добавить:

 invalidHandler: function(event, validator) {
        if (validator.errorList.length > 0) {
            $('.error-menu li').show();
        }
        validator.successList.forEach(function(element, index) {
            $('.error-menu li a[href="#'   $(element).prev().attr('for') 
                    '"]').closest('li').hide();
        });
    }

Фрагмент:

 function save_page(obj) {

}
$(function () {
  $("#form-jsvalidate").validate({
    rules: {
      "firstName": {
        required: true
      },
      "lastName": {
        required: true
      },
      "dobMonth": {
        required: true
      },
      "country": {
        required: true
      }
    },
    messages: {
      "firstName": {
        required: "Enter your first name"
      },
      "lastName": {
        required: "Enter your last name"
      },
      "dobMonth": {
        required: "Enter the month you were born"
      },
      "country": {
        required: "Country is required"
      }
    },
    invalidHandler: function(event, validator) {
      if (validator.errorList.length > 0) {
        $('.error-menu li').show();
      }
      validator.successList.forEach(function(element, index) {
        $('.error-menu li a[href="#'   $(element).prev().attr('for')   '"]').closest('li').hide();
      });
    }
    /*submitHandler: function (form) {
                 alert('valid');
                 return false;
                 }*/
  });

  $('#form-jsvalidate').validate().settings.ignore = ':not(select.selectpicker, select:visible, input:visible, textarea:visible)';

  $('input, select').on('input change', function() {
    if ($("#form-jsvalidate").valid()) {
      $('.error-menu li').hide();
    }
  });

  $('.btn-submit-val').on('click', function() {
    $("#form-jsvalidate").valid();
    return false;
  });

  $('.error-menu').show();
  $("#form-jsvalidate").valid();
});

 body {
  margin: 10px;
}

.error-message-container {
  background: cornflowerblue;
}

.error-message-container ol li a label {
  display: inline;
  margin: 0;
  text-decoration: underline;
  font-weight: normal;
  color: pink;
}

label.error {
  color: red;
}

input.error,
select.error,
.input-validation-error button {
  border: 1px solid red !important;
}
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: auto !important;
}


ol.error-menu {
  display: none;
}

li {
  margin-left: 20px;
  list-style-type:decimal;
}

.hidethis {
  display: none;
}

.showthis {
  display: list-item;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>

<form id="form-jsvalidate" action="/" method="post">

    <ol class="error-message-container error-menu">
        <li><a href="#firstName"><label class="error" for="firstName" generated="true"></label></a></li>
        <li><a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>
        <li><a href="#dobMonth"><label class="error" for="dobMonth" generated="true"></label></a>
        <li><a href="#country"><label class="error" for="country" generated="true"></label></a>
    </ol>

    <div class="form-group">
        <label for="firstName" class="control-label">First Name</label>
        <label class="error" for="firstName" generated="true"></label>
        <input type="text" class="form-control" id="firstName" name="firstName" />
    </div>

    <div class="form-group">
        <label for="lastName" class="control-label">Last Name</label>
        <label class="error" for="lastName" generated="true"></label>
        <input type="text" class="form-control store" name="lastName" value="" />
    </div>

    <div class="form-group">
        <label class="error" for="dobMonth" generated="true"></label>
        <select name="dobMonth" id="dobMonth" class="required selectpicker">
            <option value="">Month</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
        </select>
    </div>

    <div class="form-group">
        <label class="error" for="country" generated="true"></label>
        <select name="country" id="country" class="required selectpicker">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
        </select>
    </div>

    <div class="form-group form-group-button-section">
        <a href="/" type="submit" class="btn-submit-val btn btn-primary icon-standard button-standard" onclick="save_page($('#formValidate *'));">Continue</a>
    </div>

</form>

1. Большое вам СПАСИБО. Это работает отлично. Спасибо!! Если у вас есть способ принимать платежи, я с радостью выложу несколько долларов за этот ответ, это огромная помощь для меня.

Ответ №2:

Вместо того, чтобы делать это:

     $('input, ul.dropdown-menu li, .form-inline').on('change', function() {
  if($('li a label').css('display') == 'none'){ 
    $('.error-menu li a label').closest('li').hide('slow'); 
  } else { 
    $('.error-menu li a label').closest('li').show('slow'); 
  }
});

Сделайте это:

 $('input').change(function() {
  var $liError = $('a[href="#'   $(this).attr('name')   '"]').closest('li');
  if($(this).is(':visible')){
    $liError.show('slow');
  }else{
    $liError.hide('slow');
  }
});

В выпадающем меню вы используете selectpicker, и у них другое событие onchange.

Ответ №3:

изменение $('.error-menu li a label').closest('li').hide('slow'); на $('.error-menu li a label').closest('li').remove('slow'); него устраняет вашу проблему!

 $('input, ul.dropdown-menu li, .form-inline').on( 'change', function() {
  if( $('li a label').css('display') == 'none'){ 
    $('.error-menu li a label').closest('li').remove('slow'); 
  } else { 
    $('.error-menu li a label').closest('li').show('slow'); 
  }
});