informel custom controls

by juliendelort

HTML

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

<inform-el reset-on-submit>
  <form>

    <label>
      First name
      <inform-field>
        <input type="text" name="firstName" required />
      </inform-field>
    </label>


    <label>
      Last name
      <inform-field name="lastName">
        <button type="button" id="valid">Set a valid value: "valid"</button>
        <button type="button" id="invalid">Set an invalid value: "invalid"</button>
      </inform-field>

    </label>

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

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

  // Click on the valid button
  document.querySelector('#valid').addEventListener('click', (e) => {
    informEl.setValues({
      lastName: 'valid'
    })
  });

  // Click on the invalid button
  document.querySelector('#invalid').addEventListener('click', (e) => {
    informEl.setValues({
      lastName: 'invalid'
    })
  });

  // Validation handler
  informEl.validationHandler = ({
    values
  }) => {
    console.log('validation handler', values)
    return {
      lastName: values.lastName ?
        values.lastName !== 'valid' ? 'This value is not valid' : '' : 'Please click on a button!'
    }
  }

  // Submit
  informEl.addEventListener('inform-submit', ({
    detail: {
      values
    }
  }) => {
    console.log('Submitting', values);
  })

</script>

CSS

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

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

}