Как сохранить действительный ввод фишек материализации после ввода фишки? - PullRequest
Новая
       14

Как сохранить действительный ввод фишек материализации после ввода фишки?

0 голосов
/ 12 апреля 2019

В настоящее время я проверяю большую многосекционную форму с использованием Materialize и jQuery-Validate и сталкиваюсь с проблемой со входами чипов, где, когда вы нажимаете «ввод» для создания чипа, вход «сбрасывается» и запускаетСообщение об ошибке «Обязательное поле».Я вижу в консоли разработчика, нажатие «enter» переключает допустимый / ошибочный класс на входе (который скрывает / показывает ошибку), а также атрибут aria-invalid, который переключает true / false.Я также вижу div с классом "chip", добавленным над входом для каждого созданного чипа.Вот пример вывода с несколькими чипами: 

<div class="chips chips-placeholder input-field col s12 m6">
   <div class="chip" tabindex="0">chip1<i class="material-icons close">close</i></div>
   <div class="chip" tabindex="0">chip2<i class="material-icons close">close</i></div>
   <input id="dfullname" name="dfullname" data-error=".errorTxt15" class="input error" autocomplete="off" placeholder="+Name" aria-describedby="dfullname-error" aria-invalid="true">
    <div class="errorTxt15">
        <div id="dfullname-error" class="error" style="">This field is required.</div>
    </div>
</div>

Я играл с методами Materialise для чипов (onChipAdd и onChipDelete) и очистки SO, потому что я даже не могу получить консоль.выйти из них.Я думал, что смогу как-то использовать их (в псевдокоде 'onChipDelete проверить, если вход пуст')

Пробовал также базовую логику if / else, проверяющую класс .chip (т. Е. 'Ifон существует, запишите это, если он не запишет это », но ни один из них не дает результатов, которые я получаю.

Итак, для данного входа, как я могу убедиться, что вход остается действительным, если на нем имеется микросхема, и активировать его как недействительный, если нет микросхем?Я создал стартовую ручку здесь и разместил код ниже:

https://codepen.io/anon/pen/MRmNag

Чтобы код работал, необходимо добавить следующее (все доступно на CDN):

  • Материализация (оба CSS / JS)
  • jQuery
  • jQuery Validate

HTML: 

<div class="container">
  <form id="portal" action="#">
    <div class="row">
      <div class="chips chips-placeholder input-field col s12 m6">
        <input id="dfullname" name="dfullname" data-error=".errorTxt15" class="input" autocomplete="off">
        <div class="errorTxt15"></div> 
      </div>
      <div class="chips chips-placeholder input-field col s12 m6">
        <input id="efullname" name="efullname" data-error=".errorTxt16" class="input" autocomplete="off">
        <div class="errorTxt16"></div> 
      </div>
    </div>

    <div class="row center-align">
      <div class="col s12">
        <button class="waves-effect waves-light btn-large btn-cyan">Submit</button>
      </div>
    </div>
  </form>  
</div>

CSS: 

.input-field div.error {
  position: relative;
  top: -.25rem;
  left: 0rem;
  font-size: 0.8rem;
  color: red;
  transform: translateY(0%);
}

JS: 

// Add custom validation for chips
$.validator.addMethod('validatechips', function(value, element) {
  if (!$('.chip')) {
    return this.optional(element) || value !== '';   
  } else {
    return false;  
  }
}, 'This is a required field.');


// Initialize chips
$('.chips').chips();
$('.chips-placeholder').chips({
  placeholder: '+Name', 
  secondaryPlaceholder: '+Name'
});


// Initialize jQuery-validate
$('#portal').validate({
  rules: {
    dfullname: {validatechips: true},
    efullname: {validatechips: true}
  },
  errorElement: 'div',
  errorPlacement: function (error, element) {
    var placement = $(element).data('error');
    if (placement) {
      $(placement).append(error);
    } else {
      error.insertAfter(element);
    }
  }
});
...