informel dirty

by juliendelort

HTML

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

<inform-el>
  <form>
    <label>
      First Name
      <input type="text" name="firstName" value="changeme"/>
    </label>
    <label>
      Last Name
      <input type="text" name="lastName" />
    </label>
    <button type="submit">Submit</button>
  </form>
</inform-el>

<span id="dirty-warn">The form is dirty!</span>

<style>
  #dirty-warn {
    visibility: hidden;
    color: red;
  }

  inform-el[dirty]~#dirty-warn {
    visibility: visible;
  }
</style>

CSS

#result {
  margin-top: 10px;
}

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

inform-el {
  --error-margin: 5px 0; 
  margin-bottom: 20px;
  display: block;
}