Question

我目前正在使用Materialize和jQuery-Validate验证大型的多部分表格，并遇到筹码输入问题，一旦按下“输入”以创建筹码，输入“重置”并触发验证的“必填字段”错误味精。我可以在开发人员控制台中看到，按“ enter”将切换输入上的有效/错误类（隐藏/显示错误的内容）以及用于切换true / false的aria-valid属性。我还看到在创建的每个芯片的输入上方都添加了“芯片”类的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);
    }
  }
});

一旦输入筹码，如何将Materialize筹码输入保持为有效？

0 个答案: