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
dlearman1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
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.
0
dlearman1Author Commented:
Thanks both comments were helpful
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.