Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery validation plug-in - dynamic forms demo</title>
	<link rel="stylesheet" media="screen" href="css/screen.css">
	<script src="../lib/jquery.js"></script>
	<script src="../dist/jquery.validate.js"></script>
	<script>
	// only for demo purposes
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});
	$.validator.messages.max = jQuery.validator.format("Your totals mustn'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.validator.format($.trim($("#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").on("keyup", "input.quantity", function(event) {
			var totals = 0;
			$("#orderitems input.quantity").each(function() {
				totals += +this.value;
			});
			$("#totals").attr("value", totals).valid();
		});

	});
	</script>
	<style>
	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="https://jqueryvalidation.org/">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">&nbsp;</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>
</body>
</html>