<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
form { padding: 10px; }
.error { color: red; }
</style>
</head>
<body>
<form>
<label for="RequiredDateDemo">A date is required (eg "15 June 2012"):</label>
<input
data-msg-date="The field RequiredDateDemo must be a date."
data-msg-required="The RequiredDateDemo field is required."
data-rule-date="true"
data-rule-required="true"
id="RequiredDateDemo" name="RequiredDateDemo" type="text" value="" />
<hr />
<label for="StringLengthAndRequiredDemo">A string is required between 5 and 10 characters long:</label>
<input
data-msg-maxlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."
data-msg-minlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."
data-msg-required="The StringLengthAndRequiredDemo field is required."
data-rule-maxlength="10"
data-rule-minlength="5"
data-rule-required="true"
id="StringLengthAndRequiredDemo" name="StringLengthAndRequiredDemo" type="text" value="" />
<hr />
<label for="RangeAndNumberDemo">Must be a number between -20 and 40:</label>
<input
data-msg-number="The field RangeAndNumberDemo must be a number."
data-msg-range="The field RangeAndNumberDemo must be between -20 and 40."
data-rule-number="true"
data-rule-range="[-20,40]"
id="RangeAndNumberDemo" name="RangeAndNumberDemo" type="text" value="-21" />
<hr />
<label for="RangeAndNumberDemo">An option must be selected:</label>
<select
data-msg-required="The DropDownRequiredDemo field is required."
data-rule-required="true"
id="DropDownRequiredDemo" name="DropDownRequiredDemo">
<option value="">Please select</option>
<option value="An Option">An Option</option>
</select>
<hr />
<button type="submit">Validate</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
var $form = $("form");
$form.validate();
$form.submit(function (event) {
if ($form.validate().valid()) {
event.preventDefault();
alert("Valid!");
}
});
</script>
</body>
</html>