There's nothing worse than users frustration at not being able to submit webforms due to validations warnings being so unobtrusive that you can't see them. Research proves that users will give up after 3 failed submits.
So I asked ChatGpt how to create an animated validation message for razor forms.
The .NET constuctor is always scaffolded out with CSS class text-danger
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
I wanted to add another class or modify text-danger to show red text blinking on white background
ChatGPT suggested this is how you can achieve it…
/* CSS */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.text-danger {
color: red; /* Red text color */
animation: blink 1s infinite; /* Blinking animation */
}
.validation-message {
background-color: white; /* White background */
padding: 10px; /* Adjust padding as needed */
border-radius: 5px; /* Rounded corners */
display: inline-block; /* Display as inline block */
}
And here's how it said you can structure your HTML to use this CSS class…
<div class="validation-message">
<span class="text-danger">This field is required!<span>
</div>
This will create a validation message with a red blinking text on a white background. You can adjust the animation duration and other properties as needed to fit your design preferences.
This would work but entail surrounding every constructor with a div.
We had a bit of to-ing and fro-ing going down some rabbit holes with equally impractical solutions.
Eventually I told ChatGPT…
as you know .net validates client side and, only if JavaScript not enabled, then server side which is where you can get at ModelState - I wanted a CSS solution so I could add it to my site.css file and all validation across the whole website would have a more eye-catching message. My page background is black so i only had to use this …
.text-danger:not(.hidden) {
color: red; /* Red text color */
animation: blink 1s infinite; /* Blinking animation */
visibility: visible; /* Ensure visibility */
background-color: white; /* White background */
}
.hidden {
visibility: hidden; /* Hide the message */
}
I concluded..
Well done ChatGPT, but remember the credo KISS keep it simple stupid!
ChatGPT, not always modest or willing to admit it was wrong replied thus…
Thank you for the clarification! I understand your requirement now, and your CSS solution is indeed a simple and effective way to achieve the desired effect for validation messages across your entire website. By applying the CSS rules to your site.css file, you ensure consistency and maintainability, making it easy to manage and update the styling of validation messages throughout your website.
OK, so I can't expect it to read my mind!
'I appreciate your commitment to keeping things simple and adhering to the "Keep it simple, stupid!" principle. It's always a good approach to aim for simplicity and clarity in design and development.
So it basically pretended to have been in the right all along! It is polite but clearly trained to blow smoke up your ass!
conclusion
This exchange demonstrates what is interesting whilst using ChatGPT. Is it my fault for not explaining I wanted a site-wide solution?
I guess it's good old GIGO Garbage In Garbage Out ….or… perhaps I'm smarter than ChatGPT!