jquery - 输入芯片后，如何将 Materialise 芯片输入保持为有效？

Question

我目前正在使用 Materialize 和 jQuery-Validate 验证一个大型的多节表单，并遇到了芯片输入问题，一旦您按下“输入”创建芯片，输入“重置”并触发验证的“必需”字段”错误消息。我可以在开发控制台中看到，按“enter”正在切换输入上的有效/错误类（这是隐藏/显示错误的原因）以及切换真/假的 aria-invalid 属性。我还看到在每个创建的芯片的输入上方添加了一个带有“芯片”类的 div。这是带有几个芯片的输出示例：

<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>

我一直在使用 Materialize 的芯片方法（onChipAdd 和 onChipDelete）并搜索 SO，因为我什至无法从中获取 console.log。我在想我可能能够以某种方式利用它们（在伪代码中，'onChipDelete 检查输入是否为空'）

还尝试了基本的 if/else 逻辑检查 .chip 类（即，'如果它存在记录这个，如果它不记录那个'），但都没有产生我想要的结果。

那么，对于给定的输入，如果芯片上存在芯片，我如何确保/检查输入保持有效，如果没有芯片则将其触发为无效？我在这里创建了一个入门笔并发布了以下代码：

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

要使代码正常工作，必须添加以下内容（所有内容均在 CDN 上可用）：

• 物化（CSS / JS）
• jQuery
• jQuery 验证

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);
    }
  }
});

标签： jqueryjquery-validatematerialize