using validation API

by trixta

HTML

<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>
<div class="copy-number-to-href">
 <input type="number" size="4" value="1" id="month" placeholder="Month" min="1" max="12" required /> <a href="?month=1" data-href="?month=">To month <span class="output">1</span></a>
</div>
<hr />
<p>but why use JS for this???</p>
<form action="#">
    <div>
        <button class="text" type="submit">to month: </button> <input type="number" name="month" placeholder="Month" size="4" min="1" max="12" required />
    </div>
</form>

CSS

.text {

    overflow:visible;

    /* Shrinkwrap the text in IE7- */

    margin:0;

    padding:0;

    border:0;

    color:#8f1f08;

    /* Match your link colour */

    background:transparent;

    font:inherit;

    /* Inherit font settings (doesn’t work in IE7-) */

    line-height:normal;

    /* Override line-height to avoid spacing issues */

    text-decoration:underline;

    /* Make it look linky */

    cursor:pointer;

    /* Buttons don’t make the cursor change in all browsers */

    -moz-user-select:text;

    /* Make button text selectable in Gecko */

}

/* Make sure keyboard users get visual feedback */

.text:hover, .text:focus {

    color:#800000;

    background-color:#e3e0d1;

}

/* Remove mystery padding in Gecko browsers.
 * See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
 */

.text::-moz-focus-inner {

    padding:0;

    border:0;

}

JavaScript

(function () {
    webshims.setOptions({
        'forms-ext': {
            types: 'number'
        }
    });

    webshims.polyfill('forms forms-ext');

    jQuery(function ($) {

        $('.copy-number-to-href').on('input', function (e) {
            if ($(e.target).is(':valid')) {
                var value = $.prop(e.target, 'value');
                $('.output', this).html(value);
                $('a[data-href]', this).attr('href', function () {
                    return $(this).data('href') + value;
                });
            }
            });

    });
})();