1

How can I programmatically mark text field as invalid in Material Design Light?

My HTML code:

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input id="email" type="email" class="mdl-textfield__input">
    <label for="email" class="mdl-textfield__label">Email</label>
    <span class="mdl-textfield__error">Email is invalid or already taken!!!</span>
  </div>

I added is-invalid class in JavaScript but it displays badly:

enter image description here

guest
  • 1,696
  • 4
  • 20
  • 31
  • Side note: multiple exclamation marks come over as highly aggressive. – Siguza Jun 13 '17 at 18:18
  • Use AJAX to send requests to a PHP file which deliberately checks the database for emails to see if email is taken. That or have it submit on a button click instead. –  Jun 13 '17 at 18:33
  • Refer to https://stackoverflow.com/questions/46155/validate-email-address-in-javascript to make sure the entered email is valid via JavaScript –  Jun 13 '17 at 18:35

0 Answers0