webshim.setOptions('forms', { //show custom styleable validation bubble replaceValidationUI: true, customMessages: true }); //start polyfilling webshim.polyfill('forms'); //render messages $(function () { var renderMessages = function () { $('.getErrorMessage', this).html($('input[type="email"]', this).getErrorMessage()); $('.validationMessage', this).html($('input[type="email"]', this).prop('validationMessage')); }; //render/update on input and on start $('.message-test').on('input', renderMessages).each(renderMessages); //+ update on lang change $(webshim.validityMessages).on('change', function () { $('.message-test').each(renderMessages); }); }); //end: render messages //render activeLang-select $(function () { var langs = webshim.validityMessages.availableLangs.concat(['de', 'en', 'en-AU', 'en-GB', 'en-US']).sort(); langs.unshift(''); $('select.active-lang').each(function () { var select = $(this); var options = langs.map(function (lang) { return '<option>' + lang + '</option>'; }); var onLangChange = function () { select.val(this.__activeName || webshim.activeLang()); }; select.html(options) .on('change', function () { var value = select.val(); if (value) { webshim.activeLang(value); } }); $(webshim.validityMessages) .on('change', onLangChange) .each(onLangChange); }); });
<form action="#"> <div class="form-row message-test"> <label for="email">email with data-errormessage</label> <input data-errormessage='{"valueMissing": "Please enter your email adress.", "typeMismatch": "Your email is not correct."}' required="" type="email" id="email" /> <ul> <li>$.getErrorMessage: <span class="getErrorMessage"></span> </li> <li>validationMessage: <span class="validationMessage"></span> </li> </ul> </div> <div class="form-row message-test"> <label for="email2">email without data-errormessage</label> <input required="" type="email" id="email" /> <ul> <li>$.getErrorMessage: <span class="getErrorMessage"></span> </li> <li>validationMessage: <span class="validationMessage"></span> </li> </ul> </div> <div class="form-row"> <input type="submit" /> </div> </form> <label class="lang-select">change lang <select class="active-lang"></select> </label>