diff options
Diffstat (limited to 'bug/bug/jquery-validation-1.8.1/demo/dynamic-totals.html')
| -rw-r--r-- | bug/bug/jquery-validation-1.8.1/demo/dynamic-totals.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/bug/bug/jquery-validation-1.8.1/demo/dynamic-totals.html b/bug/bug/jquery-validation-1.8.1/demo/dynamic-totals.html new file mode 100644 index 0000000..5ea4582 --- /dev/null +++ b/bug/bug/jquery-validation-1.8.1/demo/dynamic-totals.html @@ -0,0 +1,151 @@ +<?xml version="1.0" encoding="ISO-8859-1" ?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> +<title>jQuery validation plug-in - dynamic forms demo</title> + +<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> + +<script src="../lib/jquery.js" type="text/javascript"></script> +<script src="../jquery.validate.js" type="text/javascript"></script> + +<script type="text/javascript"> +// only for demo purposes +$.validator.setDefaults({ + submitHandler: function() { + alert("submitted!"); + } +}); +$.validator.messages.max = jQuery.format("Your totals musn't exceed {0}!"); + +$.validator.addMethod("quantity", function(value, element) { + return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]); +}, "Please select both the item and its amount."); + +$().ready(function() { + $("#orderform").validate({ + errorPlacement: function(error, element) { + error.appendTo( element.parent().next() ); + }, + highlight: function(element, errorClass) { + $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass); + } + }); + + var template = jQuery.format($("#template").val()); + function addRow() { + $(template(i++)).appendTo("#orderitems tbody"); + } + + var i = 1; + // start with one row + addRow(); + // add more rows on click + $("#add").click(addRow); + + // check keyup on quantity inputs to update totals field + $("#orderform").delegate("keyup", "input.quantity", function(event) { + var totals = 0; + $("#orderitems input.quantity").each(function() { + totals += +this.value; + }); + $("#totals").attr("value", totals).valid(); + }); + +}); +</script> + +<style type="text/css"> +form.cmxform { width: 50em; } +em.error { + background:url("images/unchecked.gif") no-repeat 0px 0px; + padding-left: 16px; +} +em.success { + background:url("images/checked.gif") no-repeat 0px 0px; + padding-left: 16px; +} + +form.cmxform label.error { + margin-left: auto; + width: 250px; +} +form.cmxform input.submit { + margin-left: 0; +} +em.error { color: black; } +#warning { display: none; } +select.error { + border: 1px dotted red; +} +</style> + +</head> +<body> + +<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> +<div id="main"> + +<textarea style="display:none" id="template"> + <tr> + <td> + <label>{0}. Item</label> + </td> + <td class='type'> + <select name="item-type-{0}"> + <option value="">Select...</option> + <option value="0">Learning jQuery</option> + <option value="1">jQuery Reference Guide</option> + <option value="2">jQuery Cookbook</option> + <option vlaue="3">jQuery In Action</option> + <option value="4">jQuery For Designers</option> + </select> + </td> + <td class='quantity'> + <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}" /> + </td> + <td class='quantity-error'></td> + </tr> +</textarea> + +<form id="orderform" class="cmxform" method="get" action="foo.html"> + <h2 id="summary"></h2> + + <fieldset> + <legend>Example with custom methods and heavily customized error display</legend> + <table id="orderitems"> + <tbody> + + </tbody> + <tfoot> + <tr> + <td colspan="2"><label>Totals (max 25)</label></td> + <td class="totals"><input id="totals" name="totals" value="0" max="25" readonly="readonly" size='4' /></td> + <td class="totals-error"></td> + </tr> + <tr> + <td colspan="2"> </td> + <td><input class="submit" type="submit" value="Submit"/></td> + </tr> + </tfoot> + </table> + </fieldset> +</form> + +<button id="add">Add another input to the form</button> + +<h1 id="warning">Your form contains tons of errors! Please try again.</h1> + +<p><a href="index.html">Back to main page</a></p> + +</div> + +<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> +</script> +<script type="text/javascript"> +_uacct = "UA-2623402-1"; +urchinTracker(); +</script> +</body> +</html>
\ No newline at end of file |