# HTML5 form validators with Stimulus?

**URL:** <https://discuss.hotwired.dev/t/html5-form-validators-with-stimulus/28>\
**Category:** General\
**Created:** [February 2, 2018, 8:50pm UTC](https://discuss.hotwired.dev/t/html5-form-validators-with-stimulus/28 "2018-02-02T20:50:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![coderberry](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/coderberry/32/31_2.png) [@coderberry](https://discuss.hotwired.dev/u/coderberry)\
**Post date:** [February 2, 2018, 8:50pm UTC](https://discuss.hotwired.dev/t/html5-form-validators-with-stimulus/28/1 "2018-02-02T20:50:03Z")

</div>

I was wondering if there is a way to use the HTML5 form validators along with stimulus.

For example, I have a form:

```auto
<form class="form-custom" action="contact/" method="POST" data-controller="contact-form">
  <input type="text" name="first_name" data-target="contact-form.name" required />
  <input type="submit" data-action="click->contact-form#submit" value="Submit" />
</form>

```

and a controller:

```auto
import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ["name"]

  submit(event) {
    event.preventDefault(); // Do not submit form

    const name = this.nameTarget.value;

    console.log(`Hello ${name}`);
  }
}

```

I imagine that the event.preventDefault() is not allowing the html5 form validation, but is there a better way to do this using stimulus?

Thanks!

---

<div class="post-metadata">

**Author:** ![mike1234](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/mike1234/32/17_2.png) [@mike1234](https://discuss.hotwired.dev/u/mike1234)\
**Post date:** [February 2, 2018, 9:27pm UTC](https://discuss.hotwired.dev/t/html5-form-validators-with-stimulus/28/2 "2018-02-02T21:27:40Z")

</div>

I haven’t checked, but can you manually check for validity and prevent default afterwards?

> **[Constraint validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_validation_process)**
>
> The creation of web forms has always been a complex task. While marking up the form itself is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache. HTML5...

> **[HTMLSelectElement.checkValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity)**
>
> The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.

```auto
submit(event) {
  if (!event.currentTarget.checkValidity()) {
    event.preventDefault(); // Do not submit form
  } else {
    // submit form?
  } 

  const name = this.nameTarget.value;

  console.log(`Hello ${name}`);
  }

```

---

<div class="post-metadata">

**Author:** ![coderberry](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/coderberry/32/31_2.png) [@coderberry](https://discuss.hotwired.dev/u/coderberry)\
**Post date:** [February 2, 2018, 10:17pm UTC](https://discuss.hotwired.dev/t/html5-form-validators-with-stimulus/28/3 "2018-02-02T22:17:48Z")

</div>

Thank you. I was able to resolve it with this code:

```auto
submit(event) {
  if (!this.element.checkValidity()) { return; }

  const name = this.nameTarget.value;

  console.log(`Hello ${name}`);
}

```