Salid - The Simple jQuery Form Validator

customize-default-error-handler.css

/* the DIV container */
#salid_wrapper { }

/* the anchor link to close the lightbox */
#salid_wrapper #salid_close { }
#salid_wrapper #salid_close:hover { }

/* the content block containing the unordered list of errors */
#salid_wrapper .salid_content { }

/* unordered list of errors */
#salid_wrapper ul { }
#salid_wrapper ul li { }

default-error-handler.js

/* default error handler popup */
function salid_errorHandler($elem, errors) {
	var isformelem, $e, e, i = errors.length, errorMsg, placement;
	isformelem = $elem[0].tagName.toLowerCase() != 'form';
	while (i--) {
		e = errors[i];
		$e = $(e.elem);
		errorMsg = '<div class="message red"><span>' + e.msg + '</span></div>';

		// handle error positioning
		placement = $e.data('placement');
		if (placement) {
			if (placement == 'appendForm') {
				$e.closest('form').append(errorMsg);
			} else if (placement == 'prependForm') {
				$e.closest('form').prepend(errorMsg);
			} else if (placement == 'appendSiblingLabel') {
				$e.siblings('label').append(errorMsg);
			} else if (placement == 'prependSiblingLabel') {
				$e.siblings('label').prepend(errorMsg);
			} else if (placement == 'appendParent') {
				$e.parent().append(errorMsg);
			} else if (placement == 'prependParent') {
				$e.parent().prepend(errorMsg);
			} else if (placement == 'before') {
				$e.before(errorMsg);
			} else if (placement == 'after') {
				$e.after(errorMsg);
			}
		} else {
			if ($e.is(':radio') || $e.is(':checkbox')) {
				$e.parent('label').addClass('error').after(errorMsg);
			} else {
				$e.after(errorMsg);
			}
		}
	}

	return false;
}

example-custom-validation.js

/**
 * Validates that a field is between min and max characters
 * where min and max come from the params array.
 */
function salid_range(field, params) {
  return (salid_minlength(field, params[0]) && salid_maxlength(field, params[1]));
}
 
$(document).ready(function() {
  var validation = {
    'firstname' : {
      callback: 'range',
      msg: 'Your first name must be between 3 and 10 characters in length.',
      callbackParams: [3,10]
    }
  };

  $('#form_example2').salidate(validation);
});

example1-basic.js

$(document).ready(function() {
  var validation = {
    'firstname' : {
      callback: 'required',
      msg: 'Your first name is required.'
    },
    'lastname' : {
      callback: 'required',
      msg: 'Your last name is required.'
    },
    'my_email': {
      callbacks: [
        {
          callback: 'required',
          msg: 'An email address is required.'
        },
        {
          callback: 'email',
          msg: 'Your email address does not appear to be valid.'
        }
      ]
    }
  };

  $('#form_example1').salidate(validation);
});

metadata-plugin-support.html

<input type="text" name="username" id="username" class="{ callback: 'required', msg: 'A username is required.' }" />

metadata-plugin-support.js

var validation = { 'username' : null };

sample-validation-rule.js

function salid_customValidation(field, params) {
    // return boolean [true/false]
    return (typeof field != 'undefined');
}