1

Is it possible to change the default css of error message provided by HTML 5.

<input type="text" name="usrname" required>

I want to convert that default message into red.

Apurb Kumar Choudhary
  • 35
  • 6
  • It is possible, you can follow this tutorial: https://css-tricks.com/form-validation-ux-html-css/ – Ahmet Zeybek Feb 06 '20 at 07:38
  • Checking the mentioned link if you search for "Make certain inputs required" the tooltip you get I want to change the case for that tooltip I hope I am clear in this question – Apurb Kumar Choudhary Feb 06 '20 at 09:02

2 Answers2

0

No. But you can build your own error message using JavaScript to display good error message and can style as you wish instead of default

OR

Note You can try third party libraries like sweet alert, bootstrap alert message, etc. This will be more scure then default required property because anyone can inspect and remove required property from element and then they submit the by bypass required feild.

https://sweetalert.js.org/docs/

https://getbootstrap.com/docs/4.0/components/alerts/

Thak You

Priyanshu
  • 39
  • 1
  • 6
-2

You can try this:

.c-error .c-validation{ 
  background: #c51244 !important;
  padding: 10px !important;
  border-radius: 0 !important;
  position: relative; 
  display: inline-block !important;
  box-shadow: 1px 1px 1px #aaaaaa;
  margin-top: 10px;
}
.c-error  .c-validation:before{ 
  content: ''; 
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #c51244;
  position: absolute; 
  top: -10px; 
}
.c-label:after{
  color: #c51244 !important;
}
.c-error input, .c-error select, .c-error .c-choice-option{ 
  background: #fff0f4; 
  color: #c51244;
}
.c-error input, .c-error select{ 
  border: 1px solid #c51244 !important; 
}
<div class="cognito">
  <script src="https://services.cognitoforms.com/s/VSqLsE7970G2a-Ir3-x6cg"></script>
  <script>
    Cognito.load("forms", {
      id: "96"
    });
  </script>
</div>
Ankita Priti
  • 23
  • 6