PageRenderTime 43ms CodeModel.GetById 16ms app.highlight 18ms RepoModel.GetById 2ms app.codeStats 0ms

/lib/jquery-validate/demo/errorcontainer-demo.html

#
HTML | 161 lines | 144 code | 16 blank | 1 comment | 0 complexity | 233ababb283be35baeaddcc2f49129c1 MD5 | raw file
  1<?xml version="1.0" encoding="ISO-8859-1" ?>
  2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3<html xmlns="http://www.w3.org/1999/xhtml">
  4<head>
  5<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6<title>Test for jQuery validate() plugin</title>
  7
  8<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
  9
 10<script src="../lib/jquery.js" type="text/javascript"></script>
 11<script src="../lib/jquery.metadata.js" type="text/javascript"></script>
 12<script src="../jquery.validate.js" type="text/javascript"></script>
 13
 14<style type="text/css">
 15.cmxform fieldset p.error label { color: red; }
 16div.container {
 17	background-color: #eee;
 18	border: 1px solid red;
 19	margin: 5px;
 20	padding: 5px;
 21}
 22div.container ol li {
 23	list-style-type: disc;
 24	margin-left: 20px;
 25}
 26div.container { display: none }
 27.container label.error {
 28	display: inline;
 29}
 30form.cmxform { width: 30em; }
 31form.cmxform label.error {
 32	display: block;
 33	margin-left: 1em;
 34	width: auto;
 35}
 36</style>
 37
 38<script type="text/javascript">
 39// only for demo purposes
 40$.validator.setDefaults({
 41	submitHandler: function() {
 42		alert("submitted! (skipping validation for cancel button)");
 43	}
 44});
 45
 46$().ready(function() {
 47	$("#form1").validate({
 48		errorLabelContainer: $("#form1 div.error")
 49	});
 50	
 51	var container = $('div.container');
 52	// validate the form when it is submitted
 53	var validator = $("#form2").validate({
 54		errorContainer: container,
 55		errorLabelContainer: $("ol", container),
 56		wrapper: 'li',
 57		meta: "validate"
 58	});
 59	
 60	$(".cancel").click(function() {
 61		validator.resetForm();
 62	});
 63});
 64</script>
 65
 66</head>
 67<body>
 68
 69<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
 70<div id="main">
 71
 72<form method="get" class="cmxform" id="form1" action="">
 73	<fieldset>
 74		<legend>Login Form</legend>
 75		<p>
 76			<label>Username</label>
 77			<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
 78		</p>
 79		<p>
 80			<label>Password</label>
 81			<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
 82		</p>
 83		<div class="error">
 84		</div>
 85		<p>
 86			<input class="submit" type="submit" value="Login"/>
 87		</p>
 88	</fieldset>
 89</form>
 90
 91<!-- our error container -->
 92<div class="container">
 93	<h4>There are serious errors in your form submission, please see below for details.</h4>
 94	<ol>
 95		<li><label for="email" class="error">Please enter your email address</label></li>
 96		<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
 97		<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
 98		<li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
 99		<li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
100	</ol>
101</div>
102
103<form class="cmxform" id="form2" method="get" action="">
104	<fieldset>
105		<legend>Validating a complete form</legend>
106		<p>
107			<label for="email">Email</label>
108			<input id="email" name="email" class="{validate:{required:true,email:true}}" />
109		</p>
110		<p>
111			<label for="agree">Favorite Color</label>
112			<select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
113				<option></option>
114				<option>Red</option>
115				<option>Blue</option>
116				<option>Yellow</option>
117			</select>
118		</p>
119		<p>
120			<label for="phone">Phone</label>
121			<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
122		</p>
123		<p>
124			<label for="address">Address</label>
125			<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
126		</p>
127		<p>
128			<label for="avatar">Avatar</label>
129			<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
130		</p>
131		<p>
132			<label for="agree">Please agree to our policy</label>
133			<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
134		</p>
135		<p>
136			<label for="cv">CV</label>
137			<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
138		</p>
139		<p>
140			<input class="submit" type="submit" value="Submit"/>
141			<input class="cancel" type="submit" value="Cancel"/>
142		</p>
143	</fieldset>
144</form>
145
146<div class="container">
147	<h4>There are serious errors in your form submission, please see details above the form!</h4>
148</div>
149
150<a href="index.html">Back to main page</a>
151
152</div>
153
154<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
155</script>
156<script type="text/javascript">
157_uacct = "UA-2623402-1";
158urchinTracker();
159</script>
160</body>
161</html>