1. HTML for Required Inputs<\/h3>\n
Inputs wouldn’t necessarily need to be There is an HTML element specifically for visually displaying progress. Literally, Making the We’ll use jQuery here to make event binding and element selection easy. All our inputs here will be text-y, making keyboard events relevant. So…<\/p>\n Whether or not any particular input is valid or not in its current state is part of the DOM now. Once we have a pointer to it, we just check Now that we have an integer of how many inputs are valid, we just set up some basic logic to adjust the progress bar’s current value.<\/p>\n This is where we could also display our motivational messages. Perhaps there is a If browser support is a concern, you’ll probably want to run a little Modernizr test first. If it passes, then load scripts, inject elements, however you want to handle it.<\/p>\n If you need more help on that, read this article<\/a>.<\/p>\nrequired<\/code> for this demo, but it makes for a clean demo. Filling out an optional field doesn’t bring you any closer to the minimum requirements for submitting a form. So for this demo, we’ll have 5 required fields down a typical form that collects information for payment. <\/p>\n<form id=\"payment-form\" action=\"#\">\r\n \r\n <label for=\"name\">Full Name<\/label>\r\n <input required id=\"name\" name=\"name\">\r\n\r\n <!-- etc -->\r\n\r\n<\/form><\/code><\/pre>\n2. HTML for Progress<\/h3>\n
<progress><\/code>. Let’s have one of these available (with an ID so it’s easy to target with JavaScript). Place it where you will.<\/p>\n<progress max=\"100\" value=\"0\" id=\"progress\"><\/progress><\/code><\/pre>\nmax<\/code> attribute 100 means for easy math. The progress bar is as full as the value in percentage is. E.g. value=\"20\"<\/code> == bar is 20% full.<\/p>\n
3. Watch for Changes<\/h3>\n
$(\"#payment-form input\").keyup(function() {\r\n \r\n \/\/ calculate progress\r\n\r\n});<\/code><\/pre>\n4. Count Number of Valid Inputs<\/h3>\n
this.validity.valid<\/code> for true or false.<\/p>\nvar numValid = 0;\r\n$(\"#payment-form input[required]\").each(function() {\r\n if (this.validity.valid) {\r\n numValid++;\r\n }\r\n});<\/code><\/pre>\n5. Adjust the Progress Bar \/ Display Messages<\/h3>\n
<p><\/code> element somewhere on the page which we have a pointer to (progressMessage) and we simply adjust the text inside it to match the progress.<\/p>\n\/\/ \"Cached\" somewhere once\r\nvar progress = $(\"#progress\"),\r\n progressMessage = $(\"#progressMessage\");\r\n\r\n\/\/ Logic that runs after counting every time\r\nif (numValid == 0) {\r\n progress.attr(\"value\", \"0\");\r\n progressMessage.text(\"The form, it wants you.\");\r\n}\r\nif (numValid == 1) {\r\n progress.attr(\"value\", \"20\");\r\n progressMessage.text(\"There you go, great start!\");\r\n}<\/code><\/pre>\nBrowser Support<\/h3>\n
if (Modernizr.input.required) {\r\n\r\n \/\/ Modernizr.load, inject elements, whatever.\r\n\r\n}<\/code><\/pre>\nDemo on CodePen<\/h3>\n
<\/code><\/pre>\n