title: How to persist a Materialize chips input as valid once a chip is entered?
body: <p>I'm currently validating a large, multi-section form using Materialize and jQuery-Validate and running into an issue with chips inputs where, once you press 'enter' to create a chip, the input 'resets' and triggers the validation's "required field" error msg. I can see in the dev console, pressing "enter" is toggling a valid/error class on the input (which is what hides/shows the error) as well as an aria-invalid attribute that toggles true/false. I also see a div with the class "chip" added above the input for each chip created. Here's an example of the output with a couple of chips:</p>
  
  <pre><code>&lt;div class="chips chips-placeholder input-field col s12 m6"&gt;
     &lt;div class="chip" tabindex="0"&gt;chip1&lt;i class="material-icons close"&gt;close&lt;/i&gt;&lt;/div&gt;
     &lt;div class="chip" tabindex="0"&gt;chip2&lt;i class="material-icons close"&gt;close&lt;/i&gt;&lt;/div&gt;
     &lt;input id="dfullname" name="dfullname" data-error=".errorTxt15" class="input error" autocomplete="off" placeholder="+Name" aria-describedby="dfullname-error" aria-invalid="true"&gt;
      &lt;div class="errorTxt15"&gt;
          &lt;div id="dfullname-error" class="error" style=""&gt;This field is required.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been playing around with Materialize's methods for chips (onChipAdd and onChipDelete) and scouring SO because I can't even get a console.log out of them. I was thinking that I might be able to leverage them somehow (in pseudocode, 'onChipDelete check if the input is empty')</p>
  
  <p>Have also tried basic if/else logic checking for .chip class (i.e., 'if it exists log this, if it doesn't log that') but neither are yielding the results I'm after. </p>
  
  <p>So, for a given input, how can I ensure/check that the input remains valid if a chip exists on it and trigger it as invalid if there are no chips? I've created a starter pen here and posted the code below: </p>
  
  <p><a href="https://codepen.io/anon/pen/MRmNag" rel="nofollow noreferrer">https://codepen.io/anon/pen/MRmNag</a></p>
  
  <p>For the code to work, the following have to be added (all available on CDNs):</p>
  
  <ul>
  <li>Materialize (both CSS/JS)</li>
  <li>jQuery</li>
  <li>jQuery Validate</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form id="portal" action="#"&gt;
      &lt;div class="row"&gt;
        &lt;div class="chips chips-placeholder input-field col s12 m6"&gt;
          &lt;input id="dfullname" name="dfullname" data-error=".errorTxt15" class="input" autocomplete="off"&gt;
          &lt;div class="errorTxt15"&gt;&lt;/div&gt; 
        &lt;/div&gt;
        &lt;div class="chips chips-placeholder input-field col s12 m6"&gt;
          &lt;input id="efullname" name="efullname" data-error=".errorTxt16" class="input" autocomplete="off"&gt;
          &lt;div class="errorTxt16"&gt;&lt;/div&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row center-align"&gt;
        &lt;div class="col s12"&gt;
          &lt;button class="waves-effect waves-light btn-large btn-cyan"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.input-field div.error {
    position: relative;
    top: -.25rem;
    left: 0rem;
    font-size: 0.8rem;
    color: red;
    transform: translateY(0%);
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>// 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);
      }
    }
  });
  </code></pre>