Alter your inputs

In the ideal world everything is compatible, up to date and simply works out of the box, just like that. Unfortunately this is not the case, especially if you deal with web technologies. Recently I had to create a webpage with a form for entering some numerical data. Simple task, quickly done, but… There was one tiny problem. The webpage’s validation suppose to be clean. Unfortunately it was not:

A picture showing the result of validation of the form with W3C markup validator
Figure 1: The result of validation of the form with the W3C markup validator

It is just a warning, so one could say that it is not a big deal, but for me clean means clean. One solution is replace those inputs with simple text inputs. The problem is that I would loose the benefits they provide. Fortunately a bit of JavaScript solved the problem. What I have done was replacing the inputs as I said above, but also adding a small script that checks whether the browser supports those features and if yes, the script replaces the existing input attributes with the provided as an argument to the function. Here is the script:

function testInputs(inputType, inputId, attributes) {
    var anInput = document.createElement("input");
    anInput.type = inputType;
    anInput.value = "some string";
    if (anInput.value != "some string"
        && document.getElementById(inputId)) {
        var alterInput = document.getElementById(inputId);
        var attrMap = new Map(attributes);
        for (var [key, value] of attrMap.entries()) {
            alterInput[key] = value;
        }
    }
}

The argument attributes is an Array or other iterable object whose elements are key-value pairs where a key is an input element’s attribute and a value is attribute’s value. And here is an example how to use it (feel free to use, just remember to read the licence)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Input</title>
        <script src="input.js"></script>
    </head>
    <body>
        <form>
            <input type="text" id="dateInput">
            <input type="submit">
        </form>
        <script>
            testInputs(
                "date", 
                "dateInput", 
                [
                    ["type","date"],
                    ["min","2018-06-02"],
                    ["max","2019-06-02"]
                ]
            );
        </script>
    </body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.