Link to home
Start Free TrialLog in
Avatar of dlearman1
dlearman1Flag for United States of America

asked on

How to override browser's help text, hints?

I'm not js literate, obviously. I'm trying to override the browser default help text (or hints) using the following code but alert(name.value) is returning undefined, and I don't know why.

html
<div class="form__field">
          <label for="full-name" class="sr-only">Full Name</label>
          <input type="text" class="form-help" id="fullName" name="full-name" aria-describedby="nameHelp" placeholder="Full Name" required">
          <div class="help-icon"<span></span></div>
          <div id="nameHelp" class="help-text">Enter your full name. Example: Mary Doe</div>
          <div class="invalid-feedback">Please enter your full name.</div>
        </div>

Open in new window


js
 <script>
      var name = document.getElementById("fullName");
         alert(name.value);
      name.addEventListener("input", function (event) {
        if (name.validity.typeMismatch) {
          name.setCustomValidity("Name must be a minimum of 3 and maximum of 30 characters long");
        } else {
          name.setCustomValidity("something else");
        }
      });
    </script>

Open in new window


Also, how would I package this script as an external function call.
Thanks in advance
ASKER CERTIFIED SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dlearman1

ASKER

Thanks both comments were helpful