How edit input hint when press login button

52 Views Asked by Nevazno_html_css_js_3 At 19 March 2023 at 08:05

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.

Original Q&A

There are 1 best solutions below

InSync On 19 March 2023 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

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in INPUT

Related Questions in HINT

Trending Questions

Popular # Hahtags

Popular Questions