Bridge between semantic ui css framework and nette forms validation

netteForms.semantic-ui.js

var	SemanticUi = typeof SemanticUi == 'undefined' ? {} : SemanticUi;
SemanticUi.netteForms = {};

SemanticUi.netteForms.currentError = null;
SemanticUi.netteForms.firstError = null;

/**
 * Replaces default Nette behaviour to support SemanticUI theme
 */
SemanticUi.netteForms.addError = function (elem, message) {
	if (SemanticUi.netteForms.currentError == null) {
		SemanticUi.netteForms.firstError = {
			input: elem,
			message: message
		};
	}
	SemanticUi.netteForms.currentError = message;
};

SemanticUi.netteForms.setErrorLabel = function (elem) {
    this.removeErrorLabel(elem);
	var self = $(elem);
	self.parents('.field').addClass('error');
    $('<div class="ui red pointing above label"></div>')
        .text(SemanticUi.netteForms.currentError)
        .insertAfter(self);
};

SemanticUi.netteForms.removeErrorLabel = function (elem) {
	var self = $(elem);
	self.parents('.field').removeClass('error');
    self.siblings('.ui.red.label').remove();
};

SemanticUi.netteForms.validateForm = function(sender) {
	var form = sender.form || sender;
	if (form['nette-submittedBy'] && form['nette-submittedBy'].getAttribute('formnovalidate') !== null) {
		return true;
	}
	var errors = 0;
	SemanticUi.netteForms.removeErrorMessages(form);
	for (var i = 0; i < form.elements.length; i++) {
		var elem = form.elements[i];
		if (!(elem.nodeName.toLowerCase() in {input:1, select:1, textarea:1}) || (elem.type in {hidden:1, submit:1, image:1, reset: 1}) || elem.disabled || elem.readonly) {
			continue;
		}
		if (!Nette.validateControl(elem)) {
			SemanticUi.netteForms.setErrorLabel(elem);
			if (elem.focus) {
				elem.focus();
			}
			errors++;
		} else {
			SemanticUi.netteForms.removeErrorLabel(elem);
		}
	}
	if (errors) {
		SemanticUi.netteForms.showFirstErrorMessage(form);
	}
	return !errors;
};

SemanticUi.netteForms.cleanupErrors = function (form) {
	for (var i = 0; i < form.elements.length; i++) {
		var elem = form.elements[i];
		if (!(elem.nodeName.toLowerCase() in {input:1, select:1, textarea:1}) || (elem.type in {hidden:1, submit:1, image:1, reset: 1}) || elem.disabled || elem.readonly) {
			continue;
		}
		SemanticUi.netteForms.cleanupError(elem);
	}
};

SemanticUi.netteForms.removeErrorMessages = function (form) {
	SemanticUi.netteForms.currentError = null;
	SemanticUi.netteForms.firstError = null;
	$(form).find('.ui.error.message').remove();
};

SemanticUi.netteForms.showFirstErrorMessage = function (form) {
	var error = SemanticUi.netteForms.firstError,
		form = $(form),
		message = $('<div class="ui error message"><i class="close icon"></i></div>'),
		id = error.input.id;
	var label = form.find('label[for="' + id + '"]').text();
	if (label) {
		message.append($('<strong></strong>').text(label + ':'));
		message.append(' ');
	}
	message.append(error.message);
	if (error.input.focus) {
		message.click(function () {
			error.input.focus();
		});
	}
	var f = $(error.input).parents('fieldset');
	if (f.length) {
		f.prepend(message);
	} else {
		form.prepend(message);
	}
};

SemanticUi.netteForms.init = function () {
	Nette.validateForm = this.validateForm;
	Nette.addError = this.addError;
};

SemanticUi.netteForms.init();