Sean was supporting a web application which, as many do, had required form fields for the user to fill out. The team wanted to ensure that the required fields were marked by an “*”, as you do. Now, there are a lot of ways to potentially accomplish the goal, especially given that the forms are static and the fields are known well ahead of time.
The obvious answer is just including the asterisk directly in the HTML: <label for=”myInput”>My Input(*)</label>: <input…>. But what if the field requirements change! You’ll need to update every field label, potentially. So someone hit upon the “brillant” idea of tracking the names of the fields and their validation requirements in the database. That way, they could output that information when they rendered the page.
Now, again, an obvious solution might be to output it directly into the rendered HTML. But someone decided that they should, instead, use a CSS class to mark it. Not a bad call, honestly! You could style your input.required fields, and even use the ::before or ::after pseudoelements to inject your “*”. And if that’s what they’d done, we wouldn’t be talking about this. But that’s not what they did.
<head>
<script type=“text/javascript”>
$(document).ready(function () {
//Adds asterisk on required fields
$(“.requiredField”).prepend(“* “);
});
</script>
</head>
<body>
<div id=“first” class=“displayBlock”>
<div class=“fieldlabel”>
<span class=“requiredField”></span>First Name:</div>
@Html.TextBoxFor(i => Model.Applicant.FirstName)
<div class=“displayBlock”>@Html.ValidationMessageFor(i => Model.Applicant.FirstName)</div>
</div>
</body>
This is a Razor-based .NET View. You can see, in this trimmed down snippet, that they’re not actually using the database fields for remembering which UI elements are required, and instead did just hard-code it into the HTML. And they’re not using CSS to style anything; they’re using JQuery to select all the .required elements and inject the “*” into them.
This, by the way, is the only reason this application ever uses JQuery. The entire JQuery library dependency was added just to handle required fields. Fields, which we know are required because it’s hard-coded into the page body. Which raises the question: why not just hard-code the asterisk too? Or are we too worried about wanting to stop using “*” someday in lieu of “!”?
At this point, the code is fairly old, and no one is willing to okay a change which impacts multiple pages and doesn’t involve any newly developed features. So this odd little plug of JQuery for JQuery’s sake just sorta sits there, staring at Sean every day. No one wants it there, but no one is going to be the one to remove it.
Keep the plebs out of prod. Restrict NuGet feed privileges with ProGet. Learn more.
Source: Read MoreÂ
