max<\/em> attributes. In other words, you may get browser-led error messages (outside your programmatic control), but you might want to check that provided values are those you expect. To make a long story short, you can’t completely trust the browser\u2019s implementation of date inputs. With a calendar plugin, instead, you have a lot more control.<\/p>\nA similar story can be told for numbers. In fact, I suggest using a similar script validation for numbers to guarantee that nothing but digits are entered and that they are within the given range of values.<\/p>\n
$(\"input[data-digits-only]\")\r\n .on(\"keypress\", function(event) {\r\n if (event.charCode < 48 || event.charCode > 57) {\r\n event.preventDefault();\r\n return false;\r\n }})\r\n .on(\"keyup\", function () {\r\n var buffer = $(this).val();\r\n var maxLength = parseInt($(this).attr(\"maxlength\"));\r\n if (buffer.length > maxLength) {\r\n $(this).val(\"\");\r\n return false;\r\n }\r\n var minVal = parseInt($(this).attr(\"min\"));\r\n var maxVal = parseInt($(this).attr(\"max\"));\r\n var number = parseInt(buffer);\r\n if (number < minVal || number > maxVal) {\r\n $(this).val(\"\");\r\n return false;\r\n }\r\n return true;\r\n });<\/pre>\nThe input field can be either of type number or text as it\u2019s the attached JavaScript role to control what happens with entered data. If you make it a number, though, you have an ad hoc keyboard on mobile devices and some additional UI support on desktop browsers. The code above is attached (via jQuery in the demo) to all INPUT<\/code> elements with a custom data<\/em> attribute and ensure that min<\/em> and max<\/em> are honored as well as the maxlength<\/em> attribute (not covered by the HTML5 standard). Any non-digit character is just refused, and if more than the expected characters are typed, the buffer is automatically emptied. Users are forced to enter a valid number.<\/p>\nThe lesson we learn from this is that beyond built-in form validation, it is only via a script that you can ensure that entered data is in the proper format.<\/p>\n
Let\u2019s say that you decide to go with the above approach for all your date and number input fields. How would you silently attach those handlers to all such fields in all HTML forms? Some preliminary work should be orchestrated before a form is displayed. Believe it or not, this is just what all libraries do, including the Angular form module.<\/p>\n
Silent Configuration of the HTML Form<\/h2>\n
Let\u2019s start from a canonical form just made of a few different input types. I\u2019ll use Bootstrap 4 to make it look nicer. (See Figure 1.)<\/p>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/12\/word-image-1.jpeg\")
<\/p>\n
Figure 1: Bootstrap 4 form<\/p>\n
Here is the code for the form:<\/p>\n
<form<\/strong> method=\"post\" action=\"...\">\r\n <div class=\"form-group\">\r\n <label for=\"username\">Username<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"username\" \r\n placeholder=\"User name\" value=\"Dino\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"password\">Password<\/label>\r\n <input type=\"password\" class=\"form-control\" id=\"password\" \r\n placeholder=\"Password\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email<\/label>\r\n <input type=\"email\" class=\"form-control\" id=\"email\" \r\n placeholder=\"Email address\" value=\"user@server.com\">\r\n <small class=\"form-text text-muted\">\r\n We'll never share this with anyone else.\r\n <\/small>\r\n <\/div>\r\n <div class=\"form-group form-check\">\r\n <input type=\"checkbox\" class=\"form-check-input\" \r\n id=\"rememberme\" checked>\r\n <label class=\"form-check-label\" for=\"rememberme\">\r\nRemember me<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"age\">My age<\/label>\r\n <input type=\"range\" class=\"form-control-range\" id=\"age\">\r\n <\/div>\r\n <button type=\"button\" class=\"btn btn-primary\">Submit<\/button>\r\n<\/form<\/strong>><\/pre>\nWhether you want to attach some ad hoc configuration to a form or some individual input elements, you must first find a way to easily select them. CSS selectors are an excellent approach. By adding a custom, even empty, CSS class to the form, you make it simpler and, more importantly, general for developers to attach some script code to initialize the form in the page.<\/p>\n
<form<\/strong> class=\"ybq-form\"><\/pre>\nNow you can append a script file at the bottom of the file, or bound to document.ready<\/code> if you use jQuery, that hooks up the form and manipulates it in a way that is completely transparent to users and even other developers. Let\u2019s say you create a ybq-forms.js file with the following content:<\/p>\n$(\".ybq-form\").each(function () {\r\n ...\r\n});<\/pre>\nThe code in the each <\/code>repeater depends on the custom behavior you want to enable on the form. For example, you can add a mechanism to detect whether the original content of the form has been changed by the user. The first thing to do is store the current value of each input field. Angular and other MVVM frameworks do this through the JavaScript artifact (or TypeScript class) they use to bind data to the form. In a vanilla-JS solution, you can use a custom data<\/code> attribute on each input field.<\/p>\n$(\".ybq-form\").each(function () {\r\n var form = $(this);\r\n form.find(\"input\").each(function () {\r\n __preserveOriginalValue($(this));\r\n });\r\n})\r\n\r\n\/\/ Add data-attributes with original values\r\nfunction __preserveOriginalValue(field) {\r\n field.data(\"orig\", __getCurrentValue(field));\r\n}\r\n\r\nfunction __getCurrentValue(field) {\r\n if (field.prop(\"checked\"))\r\n return true; \r\n else\r\n return field.val();\r\n}<\/pre>\nAfter finding all INPUT<\/code> elements within the form, the code iterates and adds a data-orig<\/code> custom attribute set to the current value of the field. Note that the jQuery val()<\/code> function doesn\u2019t return Boolean, so some additional work is required to support checkboxes and possibly other specific types.<\/p>\nAdding a User Interface to Show Pending Changes<\/h2>\n
Another necessary step consists of adding some user interface elements that will be responsible for showing the current status of form, in other words, whether it has pending changes. The structure of this user interface is entirely up to you, but in some way, a reference to it must be communicated to, or discoverable by, the script. A simple way to achieve this is by assigning a CSS class to the container of the user interface. The DIV<\/code> below is then the container of any user interface message from the form.<\/p>\n<form<\/strong> class=\"ybq-form\">\r\n <div class=\"ybq-form-header\"><\/div>\r\n ...\r\n<\/form<\/strong>><\/pre>\nWhat you put in the DIV<\/code> depends on how sophisticated you want the form to be. At the very minimum, the DIV<\/code> will show a message that tells about the changed or pristine state of the form. However, you can add a timer that counts the time the user spends on the form and even a button to reset the state of the input fields to the original values. The changed\/pristine state of the form will reasonably affect the state of the submit button(s). In the end, the script will be extended with a new function.<\/p>\nfunction __stateHasChanged(form, state) {\r\n var header = form.find(\".ybq-form-header\");\r\n if (state) {\r\n header.html(\"CHANGED\").addClass(\"bg-warning\");\r\n form.find(\".ybq-form-submit\").removeAttr(\"disabled\");\r\n } else {\r\n header.html(\"NO CHANGES PENDING\").removeClass(\"bg-warning\");\r\n form.find(\".ybq-form-submit\").attr(\"disabled\", \"disabled\");\r\n }\r\n}<\/pre>\nThe function is invoked as first thing in the initialization script.<\/p>\n
$(\".ybq-form\").each(function () {\r\n var form = $(this);\r\n __stateHasChanged(form, false);\r\n form.find(\"input\").each(function () {\r\n __preserveOriginalValue($(this));\r\n });\r\n \r\n \/\/ Timer to detect changes here\r\n ...\r\n})<\/pre>\nThe header bar at the top of the form will be styled as dictated by the custom ybq-form-header<\/code> class. However, the style changes to Bootstrap\u2019s bg-warning<\/code> state when the state of the form becomes changed and will be restored if the state returns to pristine. The final step is finding a way to detect changes. There\u2019s not just one way to do it, but the one I\u2019ve chosen here is adding a timer. Fired every one or two seconds, the timer may serve two purposes. One is checking that the values in the various input fields are different from the original values. The other is calculating the time the user has spent on the form.<\/p>\nwindow.setInterval(function() {\r\n __stateHasChanged(form, false);\r\n form.find(\"input\").each(function() {\r\n if (__isChanged($(this))) {\r\n __stateHasChanged(form, true);\r\n return false;\r\n }\r\n });\r\n },\r\n 1000);<\/pre>\nTake a quick look at how the __isChanged<\/code> helper function being used. It invokes the __getCurrentValue<\/code> defined earlier and checks its value against the pristine value stored in the data-orig attribute.<\/p>\nfunction __isChanged(elem) {\r\n var outcome = __getCurrentValue(elem) != elem.data(\"orig\");\r\n return outcome;\r\n}<\/pre>\nEnriched with the above (and silently attached) script, the relatively scanty original form will now look like the one in Figure 2.<\/p>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/12\/word-image-5.png\")
<\/p>\n
Figure 2: The new form<\/p>\n
If you compare Figure 1 and Figure 2, you will see that state of the button is different if the form contains changes to be posted to the server.<\/p>\n
Summary<\/h2>\n
This article identified four aspects that, if improved, would produce more user-friendly HTML forms, even in ASP.NET or any vanilla-JS programming environments. Type-specific input fields and detection of changes in the form are covered in the article while form validation and posting will be covered in a future column.<\/p>\n
Related to the problem of detecting changes in the form, is the problem of validation that also the Forms module of Angular addresses. If there\u2019s a way to validate the content being posted, in fact, then the form should not post any invalid content. Validation, though, is a more delicate matter that is easier to deal with in an overall MVVM model. Some good results, however, can be obtained even with vanilla-JS within ASP.NET or maybe PHP web pages, but you\u2019ll read about it in the next article.<\/p>\n","protected":false},"excerpt":{"rendered":"
Creating forms is one of the most basic skills for a web developer. It\u2019s easy to, do but achieving the best user experience takes some work. In this article, Dino Esposito demonstrates how to improve the usability and functionality of web forms.…<\/p>\n","protected":false},"author":221911,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[146044],"tags":[95509],"coauthors":[6780],"class_list":["post-81909","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-standardize"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/81909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/221911"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=81909"}],"version-history":[{"count":7,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/81909\/revisions"}],"predecessor-version":[{"id":82594,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/81909\/revisions\/82594"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=81909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=81909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=81909"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=81909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}