<h2>Form validation</h2>
<p>A validation error should immediately appear when you open this CodePen.</p>

<form>
  <label>
    Mandatory input <input type="text" name="first-name" required />
  </label>
  <button type="submit">Submit</button>
</form>

body {
  font-family: 'Roboto';
  color: #333;
}

form {
  margin-bottom: 10px;
  padding: 6px;
  width: 380px;
  background: #f3f3f3;
}

input {
  width: 180px;
  vertical-align: middle;
}

document.querySelector('form').reportValidity()