Change default validation message

Asked

Viewed 173 times

1

I have a login form, where if the user does not fill in the fields, he will be notified. The default message is Fill in this field. I switched to Fill in the email or Fill in the password, depending on the input missing.

I managed to modify the default message, with the following code:

var mailMudar = document.getElementById('email');
    mailMudar.setCustomValidity('Preencha o e-mail');

What happens is whether I fill in the input from the email, it shows the message. It seems that no longer does the check.

What can it be?

/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}



/* Text Align */

.text-c {
  text-align: center;
}

.text-l {
  text-align: left;
}

.text-r {
  text-align: right
}

.text-j {
  text-align: justify;
}


/* Text Color */

.text-whitesmoke {
  color: whitesmoke
}

.text-darkyellow {
  color: rgba(255, 235, 59, 0.432)
}


/* Lines */

.line-b {
  border-bottom: 1px solid #FFEB3B !important;
}


/* Buttons */

.button {
  border-radius: 3px;
}

.form-button {
  background-color: rgb(255, 255, 255);
  border-color: rgba(255, 235, 59, 0.24);
  color: #000;
}

.form-button:hover,
.form-button:focus,
.form-button:active,
.form-button.active,
.form-button:active:focus,
.form-button:active:hover,
.form-button.active:hover,
.form-button.active:focus {
  background-color: rgb(255, 255, 255);
  border-color: rgba(255, 235, 59, 0.473);
  color: #000000;
  cursor: pointer;
}

.button-l {
  width: 100% !important;
}


/* Margins g(global) - l(left) - r(right) - t(top) - b(bottom) */

.margin-g {
  margin: 15px;
}

.margin-g-sm {
  margin: 10px;
}

.margin-g-md {
  margin: 20px;
}

.margin-g-lg {
  margin: 30px;
}

.margin-l {
  margin-left: 15px;
}

.margin-l-sm {
  margin-left: 10px;
}

.margin-l-md {
  margin-left: 20px;
}

.margin-l-lg {
  margin-left: 30px;
}

.margin-r {
  margin-right: 15px;
}

.margin-r-sm {
  margin-right: 10px;
}

.margin-r-md {
  margin-right: 20px;
}

.margin-r-lg {
  margin-right: 30px;
}

.margin-t {
  margin-top: 15px;
}

.margin-t-sm {
  margin-top: 10px;
}

.margin-t-md {
  margin-top: 20px;
}

.margin-t-lg {
  margin-top: 30px;
}

.margin-b {
  margin-bottom: 15px;
}

.margin-b-sm {
  margin-bottom: 10px;
}

.margin-b-md {
  margin-bottom: 20px;
}

.margin-b-lg {
  margin-bottom: 30px;
}


/* Bootstrap Form Control Extension */

.form-control,
.border-line {
  background-color: #fff;
  background-image: none;
  border: 1px solid #fff;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
}

.form-control:focus,
.border-line:focus {
  border-color: #FFEB3B;
  background-color: #f5e2d8;
  color: #000000;
}

.form-control,
.form-control:focus {
  box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  color: #000000;
}


/* Container */

.container-content {
  background-color: #f5874f;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #FFEB3B;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
  border-radius: 8px;
}


/* Backgrounds */

.main-bg {
  background: #ffffff;
}


/* Login & Register Pages*/

.login-container {
  max-width: 400px;
  z-index: 100;
  margin: 0 auto;
  padding-top: 100px;
}

.login.login-container {
  width: 300px;
}

.wrapper.login-container {
  margin-top: 140px;
}

.logo-badge {
  color: #e6e6e6;
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -10px;
  margin-bottom: 0;
}

.logo-badge img {
  width: 100%;
  margin-bottom: 20px;
}
<!doctype html>
<html lang="en">

<head>
  <title>Dashboard</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <link rel="stylesheet" href="css/styles.css">
  <!-- Charts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  <!-- Fonts -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

<body class="main-bg">
  <div class="login-container text-c animated flipInX">
    <div>
      <h1 class="logo-badge text-whitesmoke">
        <img src="logo.png" alt="">
        </span>
      </h1>
    </div>
    <div class="container-content">
      <form class="margin-t">
        <div class="form-group">

          <input id="email" type="mail" class="form-control" placeholder="E-mail" required="" title="Preencha o E-mail">
          <script>
            var mailMudar = document.getElementById('email');
            mailMudar.setCustomValidity('Preencha o e-mail');
          </script>
        </div>
        <div class="form-group">
          <input id="pass" type="password" class="form-control" placeholder="**********" required="" title="Preencha a senha">
          <script>
            var pass = document.getElementById('pass');
            pass.setCustomValidity('Preencha a senha');
          </script>
        </div>
        <button type="submit" class="form-button button-l margin-b">Login</button>
      </form>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

</html>

javascript html

  • I recommend you take a look at the section of [mcve].

1 answer

2


You need to empty the .setCustomValidity when the field is valid, otherwise it will always return that the field is invalid.

First I would like to make a few comments on the code:

The attribute required no need for value (required=""), just need required.

The button within a form doesn’t need type="submit", by default it is already of the type submit.

For this you can use events to do the check. In case I used onfocus (when the field is focused) and oninput (when the field is changed).

I used ternary operators to check if the field has value:

!mailMudar.value and !pass.value

Behold:

<!doctype html>
<html lang="en">

<head>
  <title>Dashboard</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <link rel="stylesheet" href="css/styles.css">
  <style>
/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}



/* Text Align */

.text-c {
  text-align: center;
}

.text-l {
  text-align: left;
}

.text-r {
  text-align: right
}

.text-j {
  text-align: justify;
}


/* Text Color */

.text-whitesmoke {
  color: whitesmoke
}

.text-darkyellow {
  color: rgba(255, 235, 59, 0.432)
}


/* Lines */

.line-b {
  border-bottom: 1px solid #FFEB3B !important;
}


/* Buttons */

.button {
  border-radius: 3px;
}

.form-button {
  background-color: rgb(255, 255, 255);
  border-color: rgba(255, 235, 59, 0.24);
  color: #000;
}

.form-button:hover,
.form-button:focus,
.form-button:active,
.form-button.active,
.form-button:active:focus,
.form-button:active:hover,
.form-button.active:hover,
.form-button.active:focus {
  background-color: rgb(255, 255, 255);
  border-color: rgba(255, 235, 59, 0.473);
  color: #000000;
  cursor: pointer;
}

.button-l {
  width: 100% !important;
}


/* Margins g(global) - l(left) - r(right) - t(top) - b(bottom) */

.margin-g {
  margin: 15px;
}

.margin-g-sm {
  margin: 10px;
}

.margin-g-md {
  margin: 20px;
}

.margin-g-lg {
  margin: 30px;
}

.margin-l {
  margin-left: 15px;
}

.margin-l-sm {
  margin-left: 10px;
}

.margin-l-md {
  margin-left: 20px;
}

.margin-l-lg {
  margin-left: 30px;
}

.margin-r {
  margin-right: 15px;
}

.margin-r-sm {
  margin-right: 10px;
}

.margin-r-md {
  margin-right: 20px;
}

.margin-r-lg {
  margin-right: 30px;
}

.margin-t {
  margin-top: 15px;
}

.margin-t-sm {
  margin-top: 10px;
}

.margin-t-md {
  margin-top: 20px;
}

.margin-t-lg {
  margin-top: 30px;
}

.margin-b {
  margin-bottom: 15px;
}

.margin-b-sm {
  margin-bottom: 10px;
}

.margin-b-md {
  margin-bottom: 20px;
}

.margin-b-lg {
  margin-bottom: 30px;
}


/* Bootstrap Form Control Extension */

.form-control,
.border-line {
  background-color: #fff;
  background-image: none;
  border: 1px solid #fff;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
}

.form-control:focus,
.border-line:focus {
  border-color: #FFEB3B;
  background-color: #f5e2d8;
  color: #000000;
}

.form-control,
.form-control:focus {
  box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  color: #000000;
}


/* Container */

.container-content {
  background-color: #f5874f;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #FFEB3B;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
  border-radius: 8px;
}


/* Backgrounds */

.main-bg {
  background: #ffffff;
}


/* Login & Register Pages*/

.login-container {
  max-width: 400px;
  z-index: 100;
  margin: 0 auto;
  padding-top: 100px;
}

.login.login-container {
  width: 300px;
}

.wrapper.login-container {
  margin-top: 140px;
}

.logo-badge {
  color: #e6e6e6;
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -10px;
  margin-bottom: 0;
}

.logo-badge img {
  width: 100%;
  margin-bottom: 20px;
}
  </style>
  <!-- Charts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  <!-- Fonts -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

<body class="main-bg">
  <div class="login-container text-c animated flipInX">
    <div>
      <h1 class="logo-badge text-whitesmoke">
        <img src="logo.png" alt="">
        </span>
      </h1>
    </div>
    <div class="container-content">
      <form class="margin-t">
        <div class="form-group">

          <input id="email" type="mail" class="form-control" placeholder="E-mail" required title="Preencha o E-mail">
        </div>
        <div class="form-group">
          <input id="pass" type="password" class="form-control" placeholder="**********" required title="Preencha a senha">
        </div>
        <button class="form-button button-l margin-b">Login</button>
      </form>
    </div>
  </div>
  <script>
  document.addEventListener("DOMContentLoaded", function(){

      var mailMudar = document.getElementById('email');
      var pass = document.getElementById('pass');

     mailMudar.onfocus = pass.onfocus = mailMudar.oninput = pass.oninput = function(){
         if(this.id == "email"){
            mailMudar.setCustomValidity(!mailMudar.value ? 'Preencha o e-mail' : '');
         }else if(this.id == "pass"){
            pass.setCustomValidity(!pass.value ? 'Preencha a senha' : '');
         }
     }
  });
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

</html>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.