Added client side validations. Fixed shared sync.
This commit is contained in:
benni
parent
013637a4fc
commit
3f133bb8c3
8 changed files with 413 additions and 7 deletions
390
public/javascripts/rails.validations.js
Normal file
390
public/javascripts/rails.validations.js
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
/*!
|
||||
* Rails 3 Client Side Validations - v3.0.1
|
||||
* https://github.com/bcardarlela/client_side_validations
|
||||
*
|
||||
* Copyright (c) 2011 Brian Cardarella
|
||||
* Licensed under the MIT license
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.fn.validate = function() {
|
||||
return this.filter('form[data-validate]').each(function() {
|
||||
var form = $(this);
|
||||
var settings = window[form.attr('id')];
|
||||
|
||||
// Set up the events for the form
|
||||
form
|
||||
.submit(function() { return form.isValid(settings.validators); })
|
||||
.bind('ajax:beforeSend', function() { return form.isValid(settings.validators); })
|
||||
// Callbacks
|
||||
.bind('form:validate:after', function(eventData) { clientSideValidations.callbacks.form.after( form, eventData); })
|
||||
.bind('form:validate:before', function(eventData) { clientSideValidations.callbacks.form.before(form, eventData); })
|
||||
.bind('form:validate:fail', function(eventData) { clientSideValidations.callbacks.form.fail( form, eventData); })
|
||||
.bind('form:validate:pass', function(eventData) { clientSideValidations.callbacks.form.pass( form, eventData); })
|
||||
|
||||
// Set up the events for each validatable form element
|
||||
.find('[data-validate]:input')
|
||||
.live('focusout', function() { $(this).isValid(settings.validators); })
|
||||
.live('change', function() { $(this).data('changed', true); })
|
||||
// Callbacks
|
||||
.live('element:validate:after', function(eventData) { clientSideValidations.callbacks.element.after( $(this), eventData); })
|
||||
.live('element:validate:before', function(eventData) { clientSideValidations.callbacks.element.before($(this), eventData); })
|
||||
.live('element:validate:fail', function(eventData, message) {
|
||||
var element = $(this);
|
||||
clientSideValidations.callbacks.element.fail(element, message, function() {
|
||||
addError(element, message);
|
||||
}, eventData) })
|
||||
.live('element:validate:pass', function(eventData) {
|
||||
var element = $(this);
|
||||
clientSideValidations.callbacks.element.pass(element, function() {
|
||||
removeError(element);
|
||||
}, eventData) })
|
||||
// Checkboxes - Live events don't support filter
|
||||
.end().find('[data-validate]:checkbox')
|
||||
.live('click', function() { $(this).isValid(settings.validators); })
|
||||
// Inputs for confirmations
|
||||
.end().find('[id*=_confirmation]').each(function() {
|
||||
var confirmationElement = $(this),
|
||||
element = form.find('#' + this.id.match(/(.+)_confirmation/)[1] + '[data-validate]:input');
|
||||
|
||||
$('#' + confirmationElement.attr('id'))
|
||||
.live('focusout', function() {
|
||||
element.data('changed', true).isValid(settings.validators);
|
||||
})
|
||||
.live('keyup', function() {
|
||||
element.data('changed', true).isValid(settings.validators);
|
||||
})
|
||||
});
|
||||
|
||||
var addError = function(element, message) {
|
||||
clientSideValidations.formBuilders[settings.type].add(element, settings, message);
|
||||
}
|
||||
|
||||
var removeError = function(element) {
|
||||
clientSideValidations.formBuilders[settings.type].remove(element, settings);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.isValid = function(validators) {
|
||||
if ($(this[0]).is('form')) {
|
||||
return validateForm($(this[0]), validators);
|
||||
} else {
|
||||
return validateElement($(this[0]), validators[this[0].name]);
|
||||
}
|
||||
}
|
||||
|
||||
var validateForm = function(form, validators) {
|
||||
var valid = true;
|
||||
|
||||
form.trigger('form:validate:before').find('[data-validate]:input').each(function() {
|
||||
if (!$(this).isValid(validators)) { valid = false; }
|
||||
});
|
||||
|
||||
if (valid) {
|
||||
form.trigger('form:validate:pass');
|
||||
} else {
|
||||
form.trigger('form:validate:fail');
|
||||
}
|
||||
|
||||
form.trigger('form:validate:after');
|
||||
return valid;
|
||||
}
|
||||
|
||||
var validateElement = function(element, validators) {
|
||||
element.trigger('element:validate:before');
|
||||
|
||||
if (element.data('changed') !== false) {
|
||||
var valid = true;
|
||||
element.data('changed', false);
|
||||
|
||||
// Because 'length' is defined on the list of validators we cannot call jQuery.each on
|
||||
// the clientSideValidations.validators.all() object
|
||||
for (kind in clientSideValidations.validators.all()) {
|
||||
if (validators[kind] && (message = clientSideValidations.validators.all()[kind](element, validators[kind]))) {
|
||||
element.trigger('element:validate:fail', message).data('valid', false);
|
||||
valid = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (valid) { element.data('valid', null); element.trigger('element:validate:pass'); }
|
||||
}
|
||||
|
||||
element.trigger('element:validate:after');
|
||||
return element.data('valid') === false ? false : true;
|
||||
}
|
||||
|
||||
// Main hook
|
||||
// If new forms are dynamically introduced into the DOM the .validate() method
|
||||
// must be invoked on that form
|
||||
$(function() { $('form[data-validate]').validate(); })
|
||||
})(jQuery);
|
||||
|
||||
var clientSideValidations = {
|
||||
validators: {
|
||||
all: function() { return jQuery.extend({}, clientSideValidations.validators.local, clientSideValidations.validators.remote) },
|
||||
local: {
|
||||
presence: function(element, options) {
|
||||
if (/^\s*$/.test(element.val())) {
|
||||
return options.message;
|
||||
}
|
||||
},
|
||||
acceptance: function(element, options) {
|
||||
switch (element.attr('type')) {
|
||||
case 'checkbox':
|
||||
if (!element.attr('checked')) {
|
||||
return options.message;
|
||||
}
|
||||
break;
|
||||
case 'text':
|
||||
if (element.val() != (options.accept || '1')) {
|
||||
return options.message;
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
format: function(element, options) {
|
||||
if ((message = this.presence(element, options)) && options.allow_blank == true) {
|
||||
return;
|
||||
} else if (message) {
|
||||
return message;
|
||||
} else {
|
||||
if (options['with'] && !options['with'].test(element.val())) {
|
||||
return options.message;
|
||||
} else if (options['without'] && options['without'].test(element.val())) {
|
||||
return options.message;
|
||||
}
|
||||
}
|
||||
},
|
||||
numericality: function(element, options) {
|
||||
if (!/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d*)?$/.test(element.val())) {
|
||||
return options.messages.numericality;
|
||||
}
|
||||
|
||||
if (options.only_integer && !/^\d+$/.test(element.val())) {
|
||||
return options.messages.only_integer;
|
||||
}
|
||||
|
||||
var CHECKS = { greater_than: '>', greater_than_or_equal_to: '>=',
|
||||
equal_to: '==', less_than: '<', less_than_or_equal_to: '<=' }
|
||||
|
||||
for (var check in CHECKS) {
|
||||
if (options[check] && !(new Function("return " + element.val() + CHECKS[check] + options[check])())) {
|
||||
return options.messages[check];
|
||||
}
|
||||
}
|
||||
|
||||
if (options.odd && !(parseInt(element.val()) % 2)) {
|
||||
return options.messages.odd;
|
||||
}
|
||||
|
||||
if (options.even && (parseInt(element.val()) % 2)) {
|
||||
return options.messages.even;
|
||||
}
|
||||
},
|
||||
length: function(element, options) {
|
||||
var blankOptions = {};
|
||||
if (options.is) {
|
||||
blankOptions.message = options.messages.is;
|
||||
} else if (options.minimum) {
|
||||
blankOptions.message = options.messages.minimum;
|
||||
}
|
||||
if ((message = this.presence(element, blankOptions)) && options.allow_blank == true && !options.maximum) {
|
||||
return;
|
||||
} else if (message) {
|
||||
return message;
|
||||
} else {
|
||||
var CHECKS = { is: '==', minimum: '>=', maximum: '<=' }
|
||||
var tokenizer = options.js_tokenizer || "split('')";
|
||||
var tokenized_length = new Function("element", "return (element.val()." + tokenizer + " || '').length;")(element);
|
||||
|
||||
for (var check in CHECKS) {
|
||||
if (options[check] && !(new Function("return " + tokenized_length + CHECKS[check] + options[check])())) {
|
||||
return options.messages[check];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
exclusion: function(element, options) {
|
||||
if ((message = this.presence(element, options)) && options.allow_blank == true) {
|
||||
return;
|
||||
} else if (message) {
|
||||
return message;
|
||||
} else {
|
||||
if (options['in']) {
|
||||
for (var i = 0; i < options['in'].length; i++) {
|
||||
if (options['in'][i] == element.val()) {
|
||||
return options.message;
|
||||
}
|
||||
}
|
||||
} else if (options['range']) {
|
||||
var lower = options['range'][0],
|
||||
upper = options['range'][1];
|
||||
if (element.val() >= lower && element.val() <= upper) {
|
||||
return options.message;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
inclusion: function(element, options) {
|
||||
if ((message = this.presence(element, options)) && options.allow_blank == true) {
|
||||
return;
|
||||
} else if (message) {
|
||||
return message;
|
||||
} else {
|
||||
if (options['in']) {
|
||||
for (var i = 0; i < options['in'].length; i++) {
|
||||
if (options['in'][i] == element.val()) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
return options.message;
|
||||
} else if (options['range']) {
|
||||
var lower = options['range'][0],
|
||||
upper = options['range'][1];
|
||||
|
||||
if (element.val() >= lower && element.val() <= upper) {
|
||||
return;
|
||||
} else {
|
||||
return options.message;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
confirmation: function(element, options) {
|
||||
if (element.val() != jQuery('#' + element.attr('id') + '_confirmation').val()) {
|
||||
return options.message;
|
||||
}
|
||||
}
|
||||
},
|
||||
remote: {
|
||||
uniqueness: function(element, options) {
|
||||
var data = {};
|
||||
data['case_sensitive'] = !!options.case_sensitive;
|
||||
if (options.id) {
|
||||
data['id'] = options.id;
|
||||
}
|
||||
|
||||
if (options.scope) {
|
||||
data.scope = {}
|
||||
for (key in options.scope) {
|
||||
var scoped_element = jQuery('[name="' + element.attr('name').replace(/\[\w+]$/, '[' + key + ']' + '"]'));
|
||||
if (scoped_element[0] && scoped_element.val() != options.scope[key]) {
|
||||
data.scope[key] = scoped_element.val();
|
||||
scoped_element.unbind('change.' + element.id).bind('change.' + element.id, function() { element.trigger('change'); element.trigger('focusout'); });
|
||||
} else {
|
||||
data.scope[key] = options.scope[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Kind of a hack but this will isolate the resource name and attribute.
|
||||
// e.g. user[records_attributes][0][title] => records[title]
|
||||
// e.g. user[record_attributes][title] => record[title]
|
||||
// Server side handles classifying the resource properly
|
||||
if (/_attributes]/.test(element.attr('name'))) {
|
||||
var name = element.attr('name').match(/\[\w+_attributes]/g).pop().match(/\[(\w+)_attributes]/).pop();
|
||||
name += /(\[\w+])$/.exec(element.attr('name'))[1];
|
||||
} else {
|
||||
var name = element.attr('name');
|
||||
}
|
||||
data[name] = element.val();
|
||||
|
||||
if (jQuery.ajax({
|
||||
url: '/validators/uniqueness.json',
|
||||
data: data,
|
||||
async: false
|
||||
}).status == 200) {
|
||||
return options.message;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
formBuilders: {
|
||||
'ActionView::Helpers::FormBuilder': {
|
||||
add: function(element, settings, message) {
|
||||
if (element.data('valid') !== false) {
|
||||
var inputErrorField = jQuery(settings.input_tag),
|
||||
labelErrorField = jQuery(settings.label_tag),
|
||||
label = jQuery('label[for="' + element.attr('id') + '"]:not(.message)');
|
||||
|
||||
if (element.attr('autofocus')) { element.attr('autofocus', false) };
|
||||
element.before(inputErrorField);
|
||||
inputErrorField.find('span#input_tag').replaceWith(element);
|
||||
inputErrorField.find('label.message').attr('for', element.attr('id'));
|
||||
labelErrorField.find('label.message').attr('for', element.attr('id'));
|
||||
label.replaceWith(labelErrorField);
|
||||
labelErrorField.find('label#label_tag').replaceWith(label);
|
||||
}
|
||||
jQuery('label.message[for="' + element.attr('id') + '"]').text(message);
|
||||
},
|
||||
remove: function(element, settings) {
|
||||
var errorFieldClass = jQuery(settings.input_tag).attr('class'),
|
||||
inputErrorField = element.closest('.' + errorFieldClass),
|
||||
label = jQuery('label[for="' + element.attr('id') + '"]:not(.message)'),
|
||||
labelErrorField = label.closest('.' + errorFieldClass);
|
||||
|
||||
if (inputErrorField[0]) {
|
||||
inputErrorField.find('#' + element.attr('id')).detach();
|
||||
inputErrorField.replaceWith(element);
|
||||
label.detach();
|
||||
labelErrorField.replaceWith(label);
|
||||
}
|
||||
}
|
||||
},
|
||||
'SimpleForm::FormBuilder': {
|
||||
add: function(element, settings, message) {
|
||||
if (element.data('valid') !== false) {
|
||||
var wrapper = element.closest(settings.wrapper_tag);
|
||||
wrapper.addClass(settings.wrapper_error_class);
|
||||
var errorElement = $('<' + settings.error_tag + ' class="' + settings.error_class + '">' + message + '</' + settings.error_tag + '>');
|
||||
wrapper.append(errorElement);
|
||||
} else {
|
||||
element.parent().find(settings.error_tag + '.' + settings.error_class).text(message);
|
||||
}
|
||||
},
|
||||
remove: function(element, settings) {
|
||||
var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_error_class);
|
||||
wrapper.removeClass(settings.wrapper_error_class);
|
||||
var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class);
|
||||
errorElement.remove();
|
||||
}
|
||||
|
||||
},
|
||||
'Formtastic::SemanticFormBuilder': {
|
||||
add: function(element, settings, message) {
|
||||
if (element.data('valid') !== false) {
|
||||
var wrapper = element.closest('li');
|
||||
wrapper.addClass('error');
|
||||
var errorElement = $('<p class="' + settings.inline_error_class + '">' + message + '</p>');
|
||||
wrapper.append(errorElement);
|
||||
} else {
|
||||
element.parent().find('p.' + settings.inline_error_class).text(message);
|
||||
}
|
||||
},
|
||||
remove: function(element, settings) {
|
||||
var wrapper = element.closest('li.error');
|
||||
wrapper.removeClass('error');
|
||||
var errorElement = wrapper.find('p.' + settings.inline_error_class);
|
||||
errorElement.remove();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
callbacks: {
|
||||
element: {
|
||||
after: function(element, eventData) { },
|
||||
before: function(element, eventData) { },
|
||||
fail: function(element, message, addError, eventData) { addError() },
|
||||
pass: function(element, removeError, eventData) { removeError() }
|
||||
},
|
||||
form: {
|
||||
after: function(form, eventData) { },
|
||||
before: function(form, eventData) { },
|
||||
fail: function(form, eventData) { },
|
||||
pass: function(form, eventData) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue