<form name="hello" onchange="updateFormValidity()">
  <label>
    A required text input
    <input type="text" required />
  </label>
</form>

<p class="status">Is the form valid? <span id="validity"></span></p>
/* just for show! */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  box-sizing: inherit;
  font-size: 62.5%;
  background-color: #BCD3F2;
}

body {
  font-size: 1.6rem;
  margin: 2rem;
  text-align: center;
}

.status {
  border-style: solid;
  border-width: .1rem;
  border-color: #80A4ED;
  max-width: 20rem;
  margin: 2rem auto;
  padding: 1rem 2rem;
  color: #395C6B;
}

label {
  font-size: 1.4rem;
  font-style: italic;
  color: #80A4ED;
}

input {
  font-size: 1.6rem;
  border-width: .1rem;
  border-style: solid;
}

input:required:invalid {
  border-color: red;
}
// document.forms is a collection of html forms on the page
// to access a specific form, use document.forms.[formName]
// and to check its validity, call form.checkValidity()

const isFormValid = () => document.forms.hello.checkValidity()

const updateFormValidity = () => {
  const element = document.getElementById('validity')
  element.textContent = isFormValid() ? 'Yes': 'No'
}

window.updateFormValidity = updateFormValidity

window.updateFormValidity() // on launch
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.