informel val

by juliendelort

HTML

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

<inform-el>
  <form>

    <label>
      Field 1
      <inform-field>
        <input type="text" name="field1" value="a" />
      </inform-field>
    </label>
    <label>
      Field 2 - Must be equal to field 1
      <inform-field>
        <input type="text" name="field2" value="b" />

      </inform-field>
    </label>


    <button type="submit">Submit</button>
  </form>
</inform-el>


<script>
  document.querySelector('inform-el').validationHandler = ({
    values
  }) => {

    if (values.field1 !== values.field2) {
      return {
        field2: 'Must be equal to field1!'
      }
    }
  }

</script>

CSS

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

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

}