informel signup

by juliendelort

HTML

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

<inform-el >
  <form>
    <label>
      Email
      <inform-field type-mismatch="Invalid email!">
        <input type="email" name="email" required />
      </inform-field>
    </label>
    <label>
      Password
      <inform-field>
        <input type="password" name="password" required minlength="8" />
      </inform-field>
    </label>
    <label>
      Repeat password
      <inform-field>
        <input type="password" name="password_repeat" />
      </inform-field>
    </label>
    <button type="submit">Submit</button>
  </form>
</inform-el>

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

  informEl.validationHandler = ({
    values
  }) => ({
    password_repeat: values.password !== values.password_repeat ? 'Passwords don\'t match!' : ''
  });
  
  informEl.addEventListener('inform-submit', ({detail:{values}})=>{
  	alert(JSON.stringify(values, null, '\t'))
  })

</script>

<style>
  inform-el {
    --error-margin: 5px 0 0 0;
  }
  
  inform-field[error] > input {
    border: 1px solid red;
  }
</style>

CSS

label {
  width: 400px;
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
}

body {
  background: #f6f8fa;
  font-family: arial;
  padding: 20px;
}