What is the Ketchup Plugin about?

Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Don't like the default styling? Change it! Need another mark up? Edit it! No validation fits your needs? Write your own! Make your own ketchup with ease.

Ketchup right out of the box. Basic validations.

Although Ketchup is designed to be styled and extended by you it already looks tasty and gives you the most common validations by default. Lets check that out.

Setup

First we need to set everything up to use Ketchup. Nothing easier than that. Include jQuery and the Ketchup stylesheet and scripts in your header:

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>

If you do plan to only use basic validations and the default messages you also can include the one package file instead of the three Ketchup script files:

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.basic.min.js"></script>

Example Markup

Next we obviously need a form to validate. This is our first basic example form:

<form action="index.html" id="example1">
  <div>
    <label for="ex1_username">Username</label>
    <input type="text" id="ex1_username" />
  </div>
  <div>
    <label for="ex1_password">Password</label>
    <input type="password" id="ex1_password" />
  </div>
  <div>
    <label for="ex1_password_conf">Password Confirmation</label>
    <input type="password" id="ex1_password_conf" />
  </div>
  <div>
    <label for="ex1_roles">Speciality</label>
    <p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
    <p><input type="checkbox" name="role" value="js" /> JavaScript</p>
    <p><input type="checkbox" name="role" value="rails" /> Rails</p>
    <p><input type="checkbox" name="role" value="php" /> PHP</p>
    <p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
    <p><input type="checkbox" name="role" value="other" /> Other</p>
    <div class="clear"></div>
  </div>
  <div>
    <label for="ex1_about">About you</label>
    <textarea id="ex1_about" rows="1"></textarea>
  </div>
  <div class="submit">
    <input type="submit" value="(Try to) Submit" />
  </div>
</form>

Add your validation right in the Markup

By default Ketchup is looking in the class attribute of input, textarea and select for validate() functions. Lets set them now:

<form action="index.html" id="example1">
  <div>
    <label for="ex1_username">Username</label>
    <input type="text" id="ex1_username" class="validate(required, username)" />
  </div>
  <div>
    <label for="ex1_password">Password</label>
    <input type="password" id="ex1_password" class="validate(required)" />
  </div>
  <div>
    <label for="ex1_password_conf">Password Confirmation</label>
    <input type="password" id="ex1_password_conf" class="validate(required, match(#ex1_password))" />
  </div>
  <div>
    <label for="ex1_roles">Speciality</label>
    <p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
    <p><input type="checkbox" name="role" value="js" /> JavaScript</p>
    <p><input type="checkbox" name="role" value="rails" /> Rails</p>
    <p><input type="checkbox" name="role" value="php" /> PHP</p>
    <p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
    <p><input type="checkbox" name="role" value="other" class="validate(rangeselect(1,3))" /> Other</p>
    <div class="clear"></div>
  </div>
  <div>
    <label for="ex1_about">About you</label>
    <textarea id="ex1_about" rows="1" class="validate(rangelength(10,140))"></textarea>
  </div>
  <div class="submit">
    <input type="submit" value="(Try to) Submit" />
  </div>
</form>

Activate Ketchup

One last simple step. We need to activate the Ketchup Plugin with the default settings on the form:

$(document).ready(function() {
  $('#example1').ketchup();
});

Outcome (Try to submit the form)

Basic Validations

Ketchup comes with these pre-written basic validations (See them in the file jquery.ketchup.validations.basic.js and the corresponding messages in jquery.ketchup.messages.js):

required validate(required)

Makes the field required.

minlength(min) validate(minlength(5))

The value must have a minimal length of min.

maxlength(max) validate(maxlength(10))

The value must have a maximal length of max.

rangelength(min, max) validate(rangelength(5,10))

The value must have a length between min and max.

min(min) validate(min(5))

The number must be at least min.

max(max) validate(max(10))

The number must be not greater than max.

range(min, max) validate(range(5,10))

The number must be between min and max.

number validate(number)

The value must be a number.

digits validate(digits)

The value must be digits.

email validate(email)

The value must be a valid e-mail address.

url validate(url)

The value must be a valid URL.

username validate(username)

The value must be a valid username (a-z0-9_-).

match(selector) validate(match(#password))

The value must match the value of the field that can be found via the selector.

date validate(date)

The value must be a valid date.

minselect(min) validate(minselect(2))

There must be at least min checkboxes selected with the same name. Apply this validation only to one checkbox in the group.

maxselect(max) validate(maxselect(6))

No more than max selected checkboxes allowed with the same name. Apply this validation only to one checkbox in the group.

rangeslect(min, max) validate(rangeselect(2,6))

Allow between min and max selected checkboxes. Apply this validation only to one checkbox in the group.

Combining Validations

You can combine validations by comma like this:

<input type="text" class="validate(required, username, rangelength(3,20))" />