How edit input hint when press login button

Question

I want to edit this hint when I press login button and input:valid is false.

How do I edit this?

Also I want disable this

body {
  background-color: #202020;
  color: #ffffff;
  font-size: 16px;
}

input {
  width: 40%;
  color:red;
  background-color: rgba(90,10,110,0.6);
  border-radius:16px;
  border:none;
  border-bottom:3px solid red;
  height: 45px;
  padding: 6px 10px 5px 10px;
}

input:focus {
  outline:none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="shortcut icon" type="image/x-icon" href="img/favicon.svg">
  <!-- reset.css -->
  <link rel="stylesheet" href="libraries/reset/reset.css">
  <!-- css js -->
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script defer src="js/script.js"></script>
</head>

<body>
  <main>
    <form>
      <div class="input">
        <input type="password" required>
      </div>
      <button>Login</button>
    </form>
  </main>
</body>
</html>

I tried setting required="123" and aria-describedby="first-name-error" and it is not achieving the effect.

Also I tried adapting the code from this article and it didn't help. (I suppose that I did something incorrectly)

I don't think this is a duplicate of this question because it isn't about styling the input element itself based on the validation state.

The browser itself is responsible for the content & presentation of that hint when the `required` attribute is set. I do not believe that you can modify/control that — Professor Abronsius, Mar 19 '23 at 08:12
The screenshot you included is a browser native UI, which isn't configurable. The linked article outlines how you could implement similar feedback UI with JavaScript in several strategies. Please include a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) with a code block that you tried, so that the community could better evaluate the context. — Bumhan Yu, Mar 19 '23 at 08:42
"I don't think this is a duplicate of this question because it isn't about styling the input element itself based on the validation state" — It **is** a duplicate. Some of the *answers* to that question mistakenly think it is about styling the input based on the validation state, but that isn't what the question is about. The two highest voted answers on that question **do** answer your question. — Quentin, Mar 24 '23 at 22:51

score 0 · Answer 1 · answered Mar 19 '23 at 09:22

.setCustomValidity() and .reportValidity() might be of use to you. The former only allows you to modify the content of the message, however.

Try it:

const input = document.querySelector('input');

input.setCustomValidity('Foobar');

input.addEventListener('keydown', function() {
  console.log(this.reportValidity());
});

<input type="text">

How edit input hint when press login button

1 Answers1