Dugan Chen's Homepage

Various Things

jQuery Validation and jQuery UI

At the risk of making a post that many people will find so elementary as to be meaningless, here’s how you get the jQuery Validation plugin to use jQuery-UI’s CSS framework to highlight error messsages:

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>Validation</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css">
</head>
<body>
	<form>
		<table class="ui-widget">
			<thead class="ui-widget-header">
				<tr>
					<td colspan="2">Validation Test</td>
				</tr>
			</thead>
			<tbody class="ui-widget-content">
				<tr>
					<td>
						<label for="req">Required</label>
					</td>
					<td>
						<input id="req" type="text" class="required" minLength="2">
					</td>
				</tr>
			</tbody>
		</table>
	</form>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script>
		$('form').validate({
			'errorClass': 'ui-state-error-text',
			'highlight': function (element, errorClass) {
				$(element).addClass('ui-state-error');
			},
			'unhighlight': function (element, errorClass) {
				$(element).removeClass('ui-state-error');
			}
		});
	</script>
</body>