How to override browser's help text, hints?

dlearman1
dlearman1 used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
Commented:
The undefine return is because the input hasn't yet a value. See below this code.When you press a key and then set this key up it starts a function that after 2 sec takes the value and shows it at the console.
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
var name = document.getElementById("fullName");

name.addEventListener('keyup',function(){
 setTimeout(function(){
 console.log(name.value);
 },2000);
});

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Where is your submit button?

See what happens when you try to submit the form.

I am assuming your code is enclosed in a <form> element - if not then put those in. Then add your submit and test your form - you should see your custom message show.

Author

Commented:
Thanks both comments were helpful

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial