Change default validation message

Question

Change default validation message

Navigation

#1 by (2 votes)

1

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

I was able to modify the default message, with the following code:

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

What happens, is whether or not I fill in the input of the email, it shows the message. It looks like it does not check anymore.

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--><linkrel="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

asked by anonymous 27.08.2018 / 23:48

1 answer

Get HTML elements from a url and send them to a div Manipulating CSS Gradient

score 2 · Accepted Answer

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

I'd like to make some comments about the code:

The attribute required does not need value ( required="" ), just only required .

The button within a form does not need type="submit" , by default it is already type submit .

For this you can use events to do the verification. 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

See:

<!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--><linkrel="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>