informel reset

by juliendelort

HTML

<script src="https://unpkg.com/informel"></script>

<inform-el>
  <form>
    <label>
      First Name
      <inform-field>
        <input type="text" name="firstName" required />
      </inform-field>
    </label>
    <label>
      Last Name
      <inform-field>
        <input type="text" name="lastName" required />
      </inform-field>
    </label>
    <button type="submit">Submit</button>
    <button id="resetbtn" type="button">Reset!</button>
  </form>
</inform-el>

<div id="dirty">
  Dirty: false
</div>

<script>
  const informEl = document.querySelector('inform-el');

  document.querySelector('#resetbtn').addEventListener('click', (e) => {

    informEl.reset({
      firstName: 'John',
      lastName: 'Doe'
    });

    setTimeout(() => {
      // Dirty state is updated asynchronously
      document.querySelector('#dirty').textContent = `Dirty: ${informEl.dirty}`;
    }, 0);
  });

  informEl.addEventListener('inform-input', () => {
     setTimeout(() => {
      // Dirty state is updated asynchronously
      document.querySelector('#dirty').textContent = `Dirty: ${informEl.dirty}`;
    }, 0);
  });
</script>

CSS

label {
  display: block;
  margin-bottom: 20px;
}
body {
  background: #f6f8fa;
  font-family: arial;
  padding: 20px;
}

inform-el {
  --error-margin: 5px 0; 

}

#dirty {
  margin-top: 20px;
}