Making a field required

[blinksbjerg]

Hi,

I'm trying to make a field required, and I'm doing this:

<mwc-textfield class="w-100" label="Email Address" name="email" type="email" required outlined></mwc-textfield>

And I can submit form form no matter what. If it's not an email address or if it's missing. What do I do?

[asyncLiz]

I don't believe the MWC beta components fully integrated with form validation, only form data.

I'd recommend upgrading to MWC 1.0 and use <md-outlined-text-field required>, which fully supports <form>. Otherwise, for the beta you need to manually run validation and prevent the form from submitting if controls are invalid.

[blinksbjerg]

Thanks!

Uhm .. good question how I do that. I've never used it before. I just downloaded https://startbootstrap.com/theme/material-admin-pro. I'm not sure I easily can upgrade it :-/

[asyncLiz]

Hm, that doesn't look like our library. It might be a product that uses our components within it. You could provide feedback for them to upgrade it.

Here's how you can run validation on the old MWC beta. Add a form submit listener, check the controls validation, then stop the form from submitting if any controls are invalid.

<form>
  <mwc-textfield class="w-100" label="Email Address" name="email" type="email" required outlined></mwc-textfield>
  <button>Submit</button>
</form>
<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', event => {
    const textField = form.querySelector('mwc-textfield');
    const isValid = textField.reportValidity();
    if (!isValid) {
      event.preventDefault();
    }
  });
</script>

https://jsbin.com/birehuteya/edit?html,output

[asyncLiz]

Also keep in mind that both our beta <mwc-*> and 1.0 <md-*> components are open source and free to use. You do not need to purchase our library to use it.

Our quick start guide shows you how to install and use it from npm.

[blinksbjerg]

Great -- thank you!