Skip to content

Instantly share code, notes, and snippets.

@mikhuang

mikhuang/README.md

Forked from eric1234/README.md
Last active January 6, 2017 01:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikhuang/8efe708cacb6f010da732d128cec2f57 to your computer and use it in GitHub Desktop.
Save mikhuang/8efe708cacb6f010da732d128cec2f57 to your computer and use it in GitHub Desktop.
Download ZIP
Polyfill for HTML5 required attribute
Raw
README.md

Purpose

Polyfill to provide support for the HTML5 "required" attribute on older browsers.

Does not provide a fancy interface like many browsers. Just a simple popup to let the user know the form is not ready. If users want a nicer interface they should use a nicer browser. :)

Usage

Just compile and include on page. Then use the "required" attribute as if everybody is running a modern browser. You must place the include at the bottom of the page so the form elements will already be in the DOM.

Compile Notes

When compiling the "bare" option should be disabled. This is usually the default but always check. For example the CoffeeScript website's in-browser compiler has "bare" enabled. If "bare" is enabled the script will still work but it will pollute your namespace.

Browser Compatibility

  • Is a no-op for browsers that already support the "required" attribute.
  • Requires no external libraries (i.e. Prototype, jQuery, etc.)
  • Does not use any advanced features (like querySelectAll) for max compatibility.
Raw
required.coffee
unless 'required' of document.createElement 'input'
# Cross browser event handling
addEvent = (element, event, callback) ->
if addEventListener?
element.addEventListener event, callback, false
else
element.attachEvent "on#{event}", callback
cancelEvent = (event) ->
if event.preventDefault
event.preventDefault()
else
event.returnValue = false
# Form processing
value = (field) ->
switch field.tagName.toLowerCase()
when 'input', 'textarea'
type = field.getAttribute 'type'
if type == 'checkbox' || type == 'radio'
field.value if field.checked
else
field.value
when 'select'
for option in field.getElementsByTagName 'option'
val = option.getAttribute 'value'
val = option.innerHTML unless val?
return val if option.selected
for form in document.getElementsByTagName 'form'
addEvent form, 'submit', (event) ->
for tag in ['input', 'select', 'textarea']
for field in document.getElementsByTagName tag
continue if field.getAttribute('required') == null
val = value field
continue unless !val || /^\s*$/.test(val)
alert 'Please provide all required fields'
cancelEvent event
return
Raw
required.js
// Generated by CoffeeScript 1.12.2
(function() {
var addEvent, cancelEvent, form, i, len, ref, value;
if (!('required' in document.createElement('input'))) {
addEvent = function(element, event, callback) {
if (typeof addEventListener !== "undefined" && addEventListener !== null) {
return element.addEventListener(event, callback, false);
} else {
return element.attachEvent("on" + event, callback);
}
};
cancelEvent = function(event) {
if (event.preventDefault) {
return event.preventDefault();
} else {
return event.returnValue = false;
}
};
value = function(field) {
var i, len, option, ref, type, val;
switch (field.tagName.toLowerCase()) {
case 'input':
case 'textarea':
type = field.getAttribute('type');
if (type === 'checkbox' || type === 'radio') {
if (field.checked) {
return field.value;
}
} else {
return field.value;
}
break;
case 'select':
ref = field.getElementsByTagName('option');
for (i = 0, len = ref.length; i < len; i++) {
option = ref[i];
val = option.getAttribute('value');
if (val == null) {
val = option.innerHTML;
}
if (option.selected) {
return val;
}
}
}
};
ref = document.getElementsByTagName('form');
for (i = 0, len = ref.length; i < len; i++) {
form = ref[i];
addEvent(form, 'submit', function(event) {
var field, j, k, len1, len2, ref1, ref2, tag, val;
ref1 = ['input', 'select', 'textarea'];
for (j = 0, len1 = ref1.length; j < len1; j++) {
tag = ref1[j];
ref2 = document.getElementsByTagName(tag);
for (k = 0, len2 = ref2.length; k < len2; k++) {
field = ref2[k];
if (field.getAttribute('required') === null) {
continue;
}
val = value(field);
if (!(!val || /^\s*$/.test(val))) {
continue;
}
alert('Please provide all required fields');
cancelEvent(event);
return;
}
}
});
}
}
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment