├── .DS_Store
├── LICENSE
├── README.md
├── attrvalidate.jquery.js
├── attrvalidate.jquery.min.js
└── example.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fraddski/attrvalidate/dc8f7274e6a899be60566622c0f43853b4943158/.DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 fraddski
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # attrvalidate
2 | 
3 | A lightweight jQuery plugin for basic form validation using HTML5 form attributes. Recommended as a polyfill for older browsers which do not provide built-in validation.
4 | 
5 | See http://skyefradd.me/attrvalidate for usage details.
6 | 


--------------------------------------------------------------------------------
/attrvalidate.jquery.js:
--------------------------------------------------------------------------------
  1 | /**
  2 | * attrvalidate jQuery plugin v1.1
  3 | * http://github.com/fraddski/attrvalidate
  4 | * Licensed under MIT
  5 | */
  6 | (function($){
  7 | 
  8 |   var functions = {
  9 |     reset: resetValidation
 10 |   };
 11 | 
 12 |   var settings;
 13 |   var _reqForm;
 14 |   var _indicatorTemplate = '<span class="error-indicator" role="alert" aria-live="assertive" aria-hidden="true"></span>';
 15 |   var _summaryTemplate = '<div id="errorSummary" class="alert alert-danger" role="alert" aria-live="assertive" tabindex="-1"><p>{0}</p></div>';
 16 |   var _validationTypes = {
 17 |     required: {msg: ' is required' },
 18 |     tel: {msg: ' is not a valid phone number' },
 19 |     email: {msg: ' is not a valid email address' },
 20 |     date: {msg: ' is not a valid date'},
 21 |     number: {msg: ' is not a valid number'}
 22 |   };
 23 | 
 24 |   $.fn.attrvalidate = function() {
 25 |      if (!this.is('form')) {
 26 |       return this;
 27 |     }
 28 | 
 29 |     if (typeof arguments[0] === 'string') {
 30 |       var property = arguments[1];
 31 |       var newArgs = Array.prototype.slice.call(arguments);
 32 |       newArgs.splice(0, 1);
 33 |       functions[arguments[0]].apply(this, newArgs);
 34 |     } else {
 35 |       setupFormValidation.apply(this, arguments);
 36 |     }
 37 | 
 38 |     return this;
 39 |   };
 40 | 
 41 | 
 42 |   function resetValidation(){
 43 |     $(_reqForm).find('input, select, textarea, fieldset').removeClass('invalid');
 44 |     $(_reqForm).find('.error-indicator').attr('aria-hidden', true);
 45 |     $(_reqForm).find('#errorSummary').remove();
 46 |   }
 47 | 
 48 |   function setupFormValidation(options){
 49 |     settings = $.extend({
 50 |       showFieldIndicator: true,
 51 |       showErrorSummary: true,
 52 |       errorSummaryMsg: 'Please fix the following issues before continuing:',
 53 |       validateTel: true,
 54 |       telRegex: /^\+*[\d-()]{7,20}$/,
 55 |       validateEmail: true,
 56 |       emailRegex: /^(\S+@\S+)*$/,
 57 |       validateDate: true,
 58 |       validateNumber: true
 59 |     }, options);
 60 | 
 61 |     _reqForm = this;
 62 |     initialiseValidation();
 63 |     $(_reqForm).bind('submit', handleSubmit);
 64 |   }
 65 | 
 66 |   function initialiseValidation(){
 67 |     var _groupsInitialised = [];
 68 |     $(_reqForm).find('input, select[required], textarea[required]').each(function(){
 69 |       if (isRadioGroup($(this)) && $(this).is('[required]')) {
 70 |         var groupName = $(this).attr('name');
 71 |         if ($.inArray(groupName, _groupsInitialised) === -1) {
 72 |           $(this).attr('data-do-validate', true);
 73 |           setFieldName($(this));
 74 | 
 75 |           if (settings.showFieldIndicator){
 76 |             $(this).parents('fieldset').first().append($(_indicatorTemplate));
 77 |           }
 78 | 
 79 |           $(_reqForm).find('input[name="' + $(this).attr('name') + '"]').each(function(){
 80 |             $(this).change(function(){
 81 |               handleFieldChanged($(this));
 82 |             });
 83 |           });
 84 |           _groupsInitialised.push(groupName);
 85 |         }
 86 |       } else {
 87 |         if ($(this).is('[required]') ||
 88 |           (settings.validateTel && $(this).is('input[type="tel"]')) ||
 89 |           (settings.validateEmail && $(this).is('input[type="email"]')) ||
 90 |           (settings.validateDate && $(this).is('input[type="date"]')) ||
 91 |           (settings.validateNumber && $(this).is('input[type="number"]'))){
 92 | 
 93 |           $(this).attr('data-do-validate', true);
 94 |           setFieldName($(this));
 95 | 
 96 |           if (settings.showFieldIndicator){
 97 |             if (($(this).is('input[type="radio"]') || $(this).is('input[type="checkbox"]')) && $(this).next('label').length > 0) {
 98 |               $(this).next('label').after($(_indicatorTemplate));
 99 |             } else {
100 |               $(this).after($(_indicatorTemplate));
101 |             }
102 |           }
103 | 
104 |           $(this).change(function(){
105 |             handleFieldChanged($(this));
106 |           });
107 |         }
108 |       }
109 |     });
110 |   }
111 | 
112 |   function handleFieldChanged(elem){
113 |     var validationResult = validateField(elem);
114 |     if (validationResult.isValid) {
115 |       clearFieldError(elem);
116 |     } else {
117 |       var fieldMsg = getFieldMessage(elem, validationResult.type);
118 |       showFieldError(elem, fieldMsg);
119 |     }
120 |   }
121 | 
122 |   function handleSubmit(e){
123 |     e.preventDefault();
124 |     var formValid = true;
125 |     var errorMessages = [];
126 | 
127 |     $(_reqForm).find('#errorSummary').remove();
128 | 
129 |     $(_reqForm).find('[data-do-validate="true"]').each(function(){
130 |       var validationResult = validateField($(this));
131 |       if (!validationResult.isValid) {
132 |         var fieldMsg = getFieldMessage($(this), validationResult.type);
133 |         errorMessages.push({ elem: $(this).prop('id'), msg: fieldMsg });
134 |         showFieldError($(this), fieldMsg);
135 |         formValid = false;
136 |       } else {
137 |         clearFieldError($(this));
138 |       }
139 |     });
140 | 
141 |     if (!formValid) {
142 |       if (settings.showErrorSummary) {
143 |         showErrorSummary(errorMessages);
144 |       }
145 |       return false;
146 |     } else {
147 |       if (typeof(settings.submitFunction) !== 'undefined') {
148 |         settings.submitFunction();
149 |       } else {
150 |         _reqForm[0].submit();
151 |       }
152 |     }
153 |   }
154 | 
155 |   function validateField(elem){
156 |     if (!elem.is(':visible') || elem.parents('[aria-hidden="true"]').length > 0){
157 |       return { isValid: true };
158 |     }
159 | 
160 |     if (elem.is('input[type="radio"]')) {
161 |       if (elem.is('[required]')){
162 |         if (isRadioGroup(elem)) {
163 |           return { isValid: ($(_reqForm).find('input[name="' + elem.attr('name') + '"]:checked').length > 0), type: _validationTypes.required };
164 |         } else {
165 |           return { isValid: elem.is(':checked'), type: _validationTypes.required };
166 |         }
167 |       } else {
168 |         return { isValid: true };
169 |       }
170 |     } else if (elem.is('input[type="checkbox"]')) {
171 |       return { isValid: (!elem.is('[required]') || elem.is(':checked')), type: _validationTypes.required };
172 |     } else {
173 |       if (elem.is('[required]') && (elem.val() === '')) {
174 |         return { isValid: false, type: _validationTypes.required };
175 |       } else if (settings.validateTel && elem.is('input[type="tel"]')) {
176 |         return { isValid: settings.telRegex.test(elem.val().replace(/ /g, '')), type: _validationTypes.tel };
177 |       } else if (settings.validateEmail && elem.is('input[type="email"]')) {
178 |         return { isValid: settings.emailRegex.test(elem.val().trim()), type: _validationTypes.email };
179 |       } else if (settings.validateDate && elem.is('input[type="date"]')) {
180 |         var doesPass;
181 |         if (elem.val().trim() === '') {
182 |           doesPass = true;
183 |         } else if (isNaN(Date.parse(elem.val()))) {
184 |           doesPass = false;
185 |         } else if (elem.prop('max') && !isNaN(Date.parse(elem.prop('max'))) && Date.parse(elem.val()) > Date.parse(elem.prop('max'))) {
186 |           doesPass = false;
187 |         } else if (elem.prop('min') && !isNaN(Date.parse(elem.prop('min'))) && Date.parse(elem.val()) < Date.parse(elem.prop('min'))) {
188 |           doesPass = false;
189 |         } else {
190 |           doesPass = true;
191 |         }
192 |         return { isValid: doesPass, type: _validationTypes.date };
193 |       } else if (settings.validateNumber && elem.is('input[type="number"]')) {
194 |         var doesPass;
195 |         if (elem.val().trim() === '') {
196 |           doesPass = true;
197 |         } else if (isNaN(parseFloat(elem.val()))) {
198 |           doesPass = false;
199 |         } else if (elem.prop('max') && !isNaN(parseFloat(elem.prop('max'))) && parseFloat(elem.val()) > parseFloat(elem.prop('max'))) {
200 |           doesPass = false;
201 |         } else if (elem.prop('min') && !isNaN(parseFloat(elem.prop('min'))) && parseFloat(elem.val()) < parseFloat(elem.prop('min'))) {
202 |           doesPass = false;
203 |         } else {
204 |           doesPass = true;
205 |         }
206 |         return { isValid: doesPass, type: _validationTypes.number };
207 |       } else {
208 |         return { isValid: true };
209 |       }
210 |     }
211 |   }
212 | 
213 |   function setFieldName(elem){
214 |     if (typeof(elem.data('error-msg')) !== 'undefined' && elem.data('error-msg') !== '') {
215 |       return;
216 |     }
217 |     var elemName;
218 |     var forLabel = $(_reqForm).find('label[for="' + elem.attr('id') + '"]');
219 |     if (forLabel.length > 0 && $(forLabel[0]).text() !== '') {
220 |       elemName = $(forLabel[0]).text();
221 |     } else {
222 |       elemName = elem.attr('name');
223 |     }
224 |     elem.data('error-name', elemName);
225 |   }
226 | 
227 |   function getFieldMessage(elem, resultType){
228 |     var elemMsg;
229 |     if (typeof(elem.data('error-msg')) !== 'undefined' && elem.data('error-msg') !== '') {
230 |       elemMsg = elem.data('error-msg');
231 |     } else {
232 |       elemMsg = elem.data('error-name') + resultType.msg;
233 |     }
234 |     return elemMsg;
235 |   }
236 | 
237 |   function showFieldError(elem, fieldMsg){
238 |     if (isRadioGroup(elem)) {
239 |       elem.parents('fieldset').first().addClass('invalid');
240 |       if (settings.showFieldIndicator){
241 |         elem.parents('fieldset').first().find('.error-indicator').first().text(fieldMsg).attr('aria-hidden', false);
242 |       }
243 |     } else {
244 |       elem.addClass('invalid');
245 |       if (settings.showFieldIndicator){
246 |         elem.nextAll('.error-indicator').first().text(fieldMsg).attr('aria-hidden', false);
247 |       }
248 |     }
249 |   }
250 | 
251 |   function clearFieldError(elem){
252 |     if (isRadioGroup(elem)) {
253 |       elem.parents('fieldset').removeClass('invalid');
254 |       if (settings.showFieldIndicator){
255 |         elem.parents('fieldset').first().find('.error-indicator').first().attr('aria-hidden', true);
256 |       }
257 |       var firstInGroup = $(_reqForm).find('input[name="' + elem.attr('name') + '"]').first();
258 |       var summaryItem = $('#errorSummary li a[data-field="' + firstInGroup.attr('id') + '"]');
259 |       if (summaryItem.length > 0) {
260 |         summaryItem.parent('li').remove();
261 |         if ($('#errorSummary ul li').length === 0) {
262 |           $('#errorSummary').remove();
263 |         }
264 |       }
265 |     } else {
266 |       elem.removeClass('invalid');
267 |       if (settings.showFieldIndicator){
268 |         elem.nextAll('.error-indicator').first().attr('aria-hidden', true);
269 |       }
270 |       var summaryItem = $('#errorSummary li a[data-field="' + elem.attr('id') + '"]');
271 |       if (summaryItem.length > 0) {
272 |         summaryItem.parent('li').remove();
273 |         if ($('#errorSummary ul li').length === 0) {
274 |           $('#errorSummary').remove();
275 |         }
276 |       }
277 |     }
278 |   }
279 | 
280 |   function showErrorSummary(errorMsgList){
281 |     var errorSummary = $(_summaryTemplate.replace('{0}', settings.errorSummaryMsg));
282 |     var errorList = $('<ul></ul>');
283 | 
284 |     for (var i=0; i < errorMsgList.length; i++) {
285 |       var errorLink = $('<a href="#" data-field="' + errorMsgList[i].elem + '">' + errorMsgList[i].msg + '</a>');
286 |       errorLink.click(function(){ jumpToElem($(this).data('field')); return false; });
287 |       var errorItm = $('<li></li>');
288 |       errorItm.append(errorLink);
289 |       errorList.append(errorItm);
290 |     }
291 | 
292 |     errorSummary.append(errorList).prependTo($(_reqForm));
293 |     errorSummary.focus();
294 |   }
295 | 
296 |   function isRadioGroup(elem){
297 |     return (elem.is('input[type="radio"]') && typeof(elem.attr('name')) !== 'undefined' && elem.attr('name') !== '');
298 |   }
299 | 
300 |   function jumpToElem(fieldId){
301 |     $(_reqForm).find('#' + fieldId).focus();
302 |   }
303 | 
304 | }(jQuery));
305 | 


--------------------------------------------------------------------------------
/attrvalidate.jquery.min.js:
--------------------------------------------------------------------------------
1 | !function(e){function i(){e(v).find("input, select, textarea, fieldset").removeClass("invalid"),e(v).find(".error-indicator").attr("aria-hidden",!0),e(v).find("#errorSummary").remove()}function t(i){h=e.extend({showFieldIndicator:!0,showErrorSummary:!0,errorSummaryMsg:"Please fix the following issues before continuing:",validateTel:!0,telRegex:/^\+*[\d-()]{7,20}$/,validateEmail:!0,emailRegex:/^(\S+@\S+)*$/,validateDate:!0,validateNumber:!0},i),v=this,a(),e(v).bind("submit",n)}function a(){var i=[];e(v).find("input, select[required], textarea[required]").each(function(){if(m(e(this))&&e(this).is("[required]")){var t=e(this).attr("name");-1===e.inArray(t,i)&&(e(this).attr("data-do-validate",!0),d(e(this)),h.showFieldIndicator&&e(this).parents("fieldset").first().append(e(y)),e(v).find('input[name="'+e(this).attr("name")+'"]').each(function(){e(this).change(function(){r(e(this))})}),i.push(t))}else(e(this).is("[required]")||h.validateTel&&e(this).is('input[type="tel"]')||h.validateEmail&&e(this).is('input[type="email"]')||h.validateDate&&e(this).is('input[type="date"]')||h.validateNumber&&e(this).is('input[type="number"]'))&&(e(this).attr("data-do-validate",!0),d(e(this)),h.showFieldIndicator&&((e(this).is('input[type="radio"]')||e(this).is('input[type="checkbox"]'))&&e(this).next("label").length>0?e(this).next("label").after(e(y)):e(this).after(e(y))),e(this).change(function(){r(e(this))}))})}function r(e){var i=s(e);if(i.isValid)p(e);else{var t=l(e,i.type);o(e,t)}}function n(i){i.preventDefault();var t=!0,a=[];return e(v).find("#errorSummary").remove(),e(v).find('[data-do-validate="true"]').each(function(){var i=s(e(this));if(i.isValid)p(e(this));else{var r=l(e(this),i.type);a.push({elem:e(this).prop("id"),msg:r}),o(e(this),r),t=!1}}),t?void("undefined"!=typeof h.submitFunction?h.submitFunction():v[0].submit()):(h.showErrorSummary&&u(a),!1)}function s(i){if(!i.is(":visible")||i.parents('[aria-hidden="true"]').length>0)return{isValid:!0};if(i.is('input[type="radio"]'))return i.is("[required]")?m(i)?{isValid:e(v).find('input[name="'+i.attr("name")+'"]:checked').length>0,type:x.required}:{isValid:i.is(":checked"),type:x.required}:{isValid:!0};if(i.is('input[type="checkbox"]'))return{isValid:!i.is("[required]")||i.is(":checked"),type:x.required};if(i.is("[required]")&&""===i.val())return{isValid:!1,type:x.required};if(h.validateTel&&i.is('input[type="tel"]'))return{isValid:h.telRegex.test(i.val().replace(/ /g,"")),type:x.tel};if(h.validateEmail&&i.is('input[type="email"]'))return{isValid:h.emailRegex.test(i.val().trim()),type:x.email};if(h.validateDate&&i.is('input[type="date"]')){var t;return t=""===i.val().trim()?!0:isNaN(Date.parse(i.val()))?!1:i.prop("max")&&!isNaN(Date.parse(i.prop("max")))&&Date.parse(i.val())>Date.parse(i.prop("max"))?!1:i.prop("min")&&!isNaN(Date.parse(i.prop("min")))&&Date.parse(i.val())<Date.parse(i.prop("min"))?!1:!0,{isValid:t,type:x.date}}if(h.validateNumber&&i.is('input[type="number"]')){var t;return t=""===i.val().trim()?!0:isNaN(parseFloat(i.val()))?!1:i.prop("max")&&!isNaN(parseFloat(i.prop("max")))&&parseFloat(i.val())>parseFloat(i.prop("max"))?!1:i.prop("min")&&!isNaN(parseFloat(i.prop("min")))&&parseFloat(i.val())<parseFloat(i.prop("min"))?!1:!0,{isValid:t,type:x.number}}return{isValid:!0}}function d(i){if("undefined"==typeof i.data("error-msg")||""===i.data("error-msg")){var t,a=e(v).find('label[for="'+i.attr("id")+'"]');t=a.length>0&&""!==e(a[0]).text()?e(a[0]).text():i.attr("name"),i.data("error-name",t)}}function l(e,i){var t;return t="undefined"!=typeof e.data("error-msg")&&""!==e.data("error-msg")?e.data("error-msg"):e.data("error-name")+i.msg}function o(e,i){m(e)?(e.parents("fieldset").first().addClass("invalid"),h.showFieldIndicator&&e.parents("fieldset").first().find(".error-indicator").first().text(i).attr("aria-hidden",!1)):(e.addClass("invalid"),h.showFieldIndicator&&e.nextAll(".error-indicator").first().text(i).attr("aria-hidden",!1))}function p(i){if(m(i)){i.parents("fieldset").removeClass("invalid"),h.showFieldIndicator&&i.parents("fieldset").first().find(".error-indicator").first().attr("aria-hidden",!0);var t=e(v).find('input[name="'+i.attr("name")+'"]').first(),a=e('#errorSummary li a[data-field="'+t.attr("id")+'"]');a.length>0&&(a.parent("li").remove(),0===e("#errorSummary ul li").length&&e("#errorSummary").remove())}else{i.removeClass("invalid"),h.showFieldIndicator&&i.nextAll(".error-indicator").first().attr("aria-hidden",!0);var a=e('#errorSummary li a[data-field="'+i.attr("id")+'"]');a.length>0&&(a.parent("li").remove(),0===e("#errorSummary ul li").length&&e("#errorSummary").remove())}}function u(i){for(var t=e(g.replace("{0}",h.errorSummaryMsg)),a=e("<ul></ul>"),r=0;r<i.length;r++){var n=e('<a href="#" data-field="'+i[r].elem+'">'+i[r].msg+"</a>");n.click(function(){return f(e(this).data("field")),!1});var s=e("<li></li>");s.append(n),a.append(s)}t.append(a).prependTo(e(v)),t.focus()}function m(e){return e.is('input[type="radio"]')&&"undefined"!=typeof e.attr("name")&&""!==e.attr("name")}function f(i){e(v).find("#"+i).focus()}var h,v,c={reset:i},y='<span class="error-indicator" role="alert" aria-live="assertive" aria-hidden="true"></span>',g='<div id="errorSummary" class="alert alert-danger" role="alert" aria-live="assertive" tabindex="-1"><p>{0}</p></div>',x={required:{msg:" is required"},tel:{msg:" is not a valid phone number"},email:{msg:" is not a valid email address"},date:{msg:" is not a valid date"},number:{msg:" is not a valid number"}};e.fn.attrvalidate=function(){if(!this.is("form"))return this;if("string"==typeof arguments[0]){var e=(arguments[1],Array.prototype.slice.call(arguments));e.splice(0,1),c[arguments[0]].apply(this,e)}else t.apply(this,arguments);return this}}(jQuery);
2 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title>Attr Validation</title>
  6 | 
  7 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  8 |     <style type="text/css">
  9 |       * { box-sizing: border-box; }
 10 |       html, body {
 11 |         padding: 0;
 12 |         margin: 0;
 13 |         background-color: #fcfcfc;
 14 |         color: #333;
 15 |         font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 16 |         font-size: 1em;
 17 |       }
 18 |       [aria-hidden="true"] {
 19 |         display: none;
 20 |       }
 21 |       a {
 22 |         text-decoration: none;
 23 |         border-bottom: solid 1px currentColor;
 24 |         transition: border-color 0.1s ease-out;
 25 |       }
 26 |       a:hover, a:focus {
 27 |         text-decoration: none;
 28 |         border-bottom-color: transparent;
 29 |       }
 30 | 
 31 |       form {
 32 |         width: 100%;
 33 |         padding: 1em;
 34 |         position: relative;
 35 |       }
 36 |       input[type="text"],
 37 |       input[type="tel"],
 38 |       input[type="email"],
 39 |       input[type="date"],
 40 |       input[type="number"],
 41 |       select,
 42 |       textarea {
 43 |         width: 100%;
 44 |         font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 45 |         color: #333;
 46 |       }
 47 |       label,
 48 |       fieldset legend {
 49 |         display: block;
 50 |         font-size: 1em;
 51 |         margin: 1.5em 0 0.5em;
 52 |       }
 53 |       input[type="text"],
 54 |       input[type="tel"],
 55 |       input[type="email"],
 56 |       input[type="date"],
 57 |       input[type="number"],
 58 |       select {
 59 |         display: block;
 60 |         font-size: 1em;
 61 |         padding: 0.5em;
 62 |       }
 63 |       input[type="radio"] {
 64 |         float: left;
 65 |       }
 66 |       input[type="radio"] + label {
 67 |         display: block;
 68 |         margin: 0 0 0.5em 2em;
 69 |       }
 70 |       input[type="checkbox"] + label {
 71 |         display: inline-block;
 72 |         margin: 0 1em 0 0.5em;
 73 |       }
 74 |       input[type="date"]::-webkit-inner-spin-button {
 75 |         display: none;
 76 |       }
 77 |       fieldset {
 78 |         border: none;
 79 |         padding: 0;
 80 |         margin: 1.5em 0 0;
 81 |       }
 82 |       button.expand-trigger {
 83 |         font-size: 1em;
 84 |         position: relative;
 85 |         border: none;
 86 |         background: transparent;
 87 |         color: #333;
 88 |         padding-left: 25px;
 89 |         margin-top: 1.5em;
 90 |         cursor: pointer;
 91 |       }
 92 |       button.expand-trigger:before {
 93 |         content: '';
 94 |         display: block;
 95 |         position: absolute;
 96 |         left: 5px;
 97 |         top: 1px;
 98 |         border: solid 8px transparent;
 99 |         border-left-color: #444;
100 |         transition: transform 0.2s ease-out;
101 |         transform-origin: left center;
102 |       }
103 |       button.expand-trigger[aria-expanded="true"]:before {
104 |         transform: rotate(90deg) translate3d(-3px, -4px, 0);
105 |       }
106 |       #collapsedSection {
107 |         display: block;
108 |         overflow: hidden;
109 |         height: auto;
110 |         max-height: 110px;
111 |         transition: max-height 0.3s ease-out;
112 |       }
113 |       #collapsedSection[aria-hidden="true"] {
114 |         max-height: 0px;
115 |       }
116 |       #collapsedSection label:first-child {
117 |         margin-top: 0.5em;
118 |       }
119 |       .tandc-wrapper {
120 |         margin: 1.5em 0;
121 |       }
122 |       button[type="submit"] {
123 |         color: #333;
124 |         background: #d9d9d9;
125 |         border: solid 1px #b9b9b9;
126 |         padding: 1em 1.5em;
127 |         font-size: 1em;
128 |         margin-right: 1em;
129 |         border-radius: 2px;
130 |         cursor: pointer;
131 |       }
132 |       button[type="submit"]:active {
133 |         background: #ddd;
134 |         border: solid 1px #bbb;
135 |       }
136 |       input[type="reset"] {
137 |         border: none;
138 |         background: transparent;
139 |         text-decoration: underline;
140 |         font-size: 1em;
141 |         cursor: pointer;
142 |       }
143 |       input[type="reset"]:hover,
144 |       input[type="reset"]:focus {
145 |         text-decoration: none;
146 |       }
147 | 
148 |       .invalid {
149 |         border: solid 1px rgba(255, 0, 0, 0.4);
150 |       }
151 |       fieldset.invalid {
152 |         border: none;
153 |       }
154 |       #errorSummary {
155 |         background-color: rgba(255, 0, 0, 0.08);
156 |         border: solid 1px rgba(255, 0, 0, 0.4);
157 |         border-radius: 2px;
158 |         padding: 15px;
159 |         -webkit-animation: show_summary 0.2s ease-out;
160 |         animation: show_summary 0.2s ease-out;
161 |       }
162 |       #errorSummary ul {
163 |         margin: 0;
164 |       }
165 |       #errorSummary li {
166 |         color: #666;
167 |         font-size: 0.95em;
168 |         padding: 0.3em 0;
169 |         margin: 0;
170 |       }
171 |       #errorSummary li a {
172 |         color: #333;
173 |       }
174 |       #errorSummary p {
175 |         margin-top: 0;
176 |       }
177 |       .error-indicator {
178 |         display: inline-block;
179 |         position: relative;
180 |         color: #f00;
181 |         margin: 5px 0;
182 |         font-size: 0.85em;
183 |       }
184 |       .tandc-wrapper .error-indicator {
185 |         display: block;
186 |       }
187 |       .error-indicator[aria-hidden="true"] {
188 |         display: none;
189 |       }
190 |       @-webkit-keyframes show_summary {
191 |         0% { transform: scale(0.9); opacity: 0.6; }
192 |         100% { transform: scale(1); opacity: 1; }
193 |       }
194 |       @keyframes show_summary {
195 |         0% { transform: scale(0.9); opacity: 0.6; }
196 |         100% { transform: scale(1); opacity: 1; }
197 |       }
198 | 
199 |       @media all and (min-width: 400px) {
200 |         form {
201 |           width: 400px;
202 |           margin: 0 auto;
203 |         }
204 |         input[type="radio"] {
205 |           float: none;
206 |         }
207 |         input[type="radio"] + label,
208 |         input[type="checkbox"] + label {
209 |           display: inline-block;
210 |           margin: 0 1em 0 0.5em;
211 |         }
212 |       }
213 |       @media all and (min-width: 800px) {
214 |         form {
215 |           width: 90%;
216 |           max-width: 800px;
217 |         }
218 |         input[type="text"],
219 |         input[type="tel"],
220 |         input[type="email"],
221 |         input[type="date"],
222 |         input[type="number"],
223 |         select {
224 |           width: 59%;
225 |           display: inline-block;
226 |         }
227 |         label,
228 |         fieldset legend {
229 |           width: 40%;
230 |           display: inline-block;
231 |         }
232 |         input[type="radio"] + label,
233 |         input[type="checkbox"] + label {
234 |           display: inline-block;
235 |           margin: 0 1em 0 0.5em;
236 |           width: 25%;
237 |         }
238 |         button[type="submit"] {
239 |           width: 15%;
240 |           padding: 1em 0;
241 |           text-align: center;
242 |           margin-right: 2%;
243 |           margin-left: 35%;
244 |         }
245 |         input[type="reset"] {
246 |           width: 15%;
247 |           text-align: center;
248 |         }
249 |         button[type="submit"],
250 |         input[type="reset"] {
251 |           margin-top: 1em;
252 |         }
253 | 
254 | 
255 |         #errorSummary {
256 |           margin-bottom: 1em;
257 |         }
258 |         .error-indicator {
259 |           display: block;
260 |           padding: 0.5em 1em;
261 |           background-color: #eee;
262 |           border-radius: 3px;
263 |           margin-top: 0.8em;
264 |           -webkit-animation: show_indicator 0.2s cubic-bezier(0.42, 0.93, 0.87, 1.31);
265 |           animation: show_indicator 0.2s cubic-bezier(0.42, 0.93, 0.87, 1.31);
266 |           transform-origin: left;
267 |         }
268 |         .error-indicator:before {
269 |           content: '';
270 |           position: absolute;
271 |           border: solid 10px transparent;
272 |           border-bottom-color: #eee;
273 |           top: -19px;
274 |           left: 0.5em;
275 |         }
276 |         @-webkit-keyframes show_indicator {
277 |           0% { transform: scale(0.9); opacity: 0.6; }
278 |           100% { transform: scale(1); opacity: 1; }
279 |         }
280 |         @keyframes show_indicator {
281 |           0% { transform: scale(0.9); opacity: 0.6; }
282 |           100% { transform: scale(1); opacity: 1; }
283 |         }
284 |       }
285 |     </style>
286 |   </head>
287 |   <body>
288 |     <form id="testform" novalidate>
289 |       <label for="firstName">Name</label>
290 |       <input id="firstName" name="firstName" type="text" required data-error-msg="We need to know who you are" />
291 | 
292 |       <label for="phoneNum">Phone number</label>
293 |       <input id="phoneNum" name="phoneNum" type="tel" required />
294 | 
295 |       <label for="emailAddress">Email address</label>
296 |       <input id="emailAddress" name="emailAddress" type="email"></input>
297 | 
298 |       <label for="dateOfBirth">Date of birth</label>
299 |       <input id="dateOfBirth" name="dateOfBirth" type="date" max="1/1/2015"></input>
300 | 
301 |       <label for="numCats">How many cats do you have?</label>
302 |       <input id="numCats" name="numCats" type="number" min="0" required data-error-msg="Count the kitties"></input>
303 | 
304 |       <label for="powerRanger">Favourite Power Ranger</label>
305 |       <select id="powerRanger" name="powerRanger" required>
306 |         <option value=""></option>
307 |         <option value="black">Black</option>
308 |         <option value="blue">Blue</option>
309 |         <option value="green">Green</option>
310 |         <option value="pink">Pink</option>
311 |         <option value="red">Red</option>
312 |         <option value="yellow">Yellow</option>
313 |         <option value="disappointing">What's a Power Ranger?</option>
314 |       </select>
315 | 
316 |       <fieldset>
317 |         <legend>How do you take your coffee?</legend>
318 |         <input type="radio" id="coffeeBlack" name="coffee" value="black" required data-error-msg="What about your coffee?" /><label for="coffeeBlack">Black</label>
319 |         <input type="radio" id="coffeeWhite" name="coffee" value="white" required /><label for="coffeeWhite">White</label>
320 |         <input type="radio" id="coffeeTea" name="coffee" value="tea" required /><label for="coffeeTea">Tea only, please</label>
321 |       </fieldset>
322 | 
323 |       <button id="expandBtn" type="button" class="expand-trigger" aria-expanded="false" aria-controls="collapsedSection">Want another question?</button>
324 |       <div id="collapsedSection" aria-hidden="true">
325 |         <label for="hiddenInput">This field may or may not be visible</label>
326 |         <input id="hiddenInput" name="hiddenInput" type="text" required data-error-msg="You wanted an extra question"></input>
327 |       </div>
328 | 
329 |       <div class="tandc-wrapper">
330 |         <input id="terms" name="terms" type="checkbox" required data-error-msg="T&amp;Cs? (you can fib)"></input>
331 |         <label for="terms">Read the T&amp;Cs?</label>
332 |       </div>
333 | 
334 |       <button type="submit">Submit</button>
335 |       <input type="reset" id="resetBtn" />
336 |     </form>
337 | 
338 |     <script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
339 |     <script src="attrvalidate.jquery.js" type="text/javascript"></script>
340 |     <script type="text/javascript">
341 |       $(document).ready(function(){
342 |         $('#testform').attrvalidate();
343 |         $('#resetBtn').click(function(){ $('#testform').attrvalidate('reset'); });
344 | 
345 |         $('#expandBtn').click(function(){
346 |           var collapsible = $('#' + $(this).attr('aria-controls'));
347 |           $(collapsible).attr('aria-hidden', ($(collapsible).attr('aria-hidden') === 'false'));
348 |           $(this).attr('aria-expanded', ($(this).attr('aria-expanded') === 'false'));
349 |         });
350 |       });
351 |     </script>
352 | 
353 |   </body>
354 | </html>
355 | 


--------------------------------------------------------------------------------