HTML5 form-validation setCustomValidity

by pierian_design

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>
<form action="#">
    <div>
        <label for="country1">Country 1</label>
        <input type="text" value="" id="country1" name="country1" required/>
        <label for="country2">Country 2</label>
        <input type="text" value="" id="country2" name="country2" required />
        <input type="submit" value="submit" />
    </div>
</form>

CSS

body {
 font: 100% arial, helvetica, sans-serif;
}

/* use .user-error */
.user-error {
  border-color: red;
}

JavaScript

(function () {
    $.webshims.polyfill('forms');

    $(function () {
        var setCountryValidity = function () {
            var message = 'Please     Enter different country ';

            //only test if valid or we have set invalid
            if ($("#country2").is(':valid') || $("#country2").prop('validationMessage') == message) {
                if ($('#country1').val() != $("#country2").val()) {
                    message = '';
                }

                $("#country2").setCustomValidity(message);
            }

        };
        
        //test if country1 was changed
        $("#country1")
            .on('change', setCountryValidity);
        //test if country2 was changed and on startup
        $("#country2")
            .on('change', setCountryValidity)
            .each(setCountryValidity);
    });
})();