JSFiddle - React, Tailwind, and code Playground

by jemonat

HTML

<script src=" http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<div class="wrapper">
	<div class="header">
		<h1 class="fixed_title">Price Per</h1>
	</div>
	<div id="products">
		<form action="process.html" method="post" name="priceper" id="priceper">

			<div class="product" id="product1">
				
					<table border=0> <!-- width="100%"-->
					<tbody>
						<tr>
							<td colspan="2">
				<div width="100%">
					<label for="name1" class="label">1 Name</label><br>
					<input name="name1" type="text" id="name1" title="Product 1" size="30">
				</div>
				<div class="price_qty_unit_calc" id="price_qty_unit_calc1">
							</td>						
						</tr>
						<tr>
							<td>
								<table border=0>
								<tbody>
									<tr>
										<td colspan="2">
				
					<div class="price">
						<label for="price1" class="label">Price</label><br>
						$ <input name="price1" type="number" id="price1" size="15" class="number">
					</div>
					
										</td>
									</tr>
									<tr>
								<div class="qty_unit" id="qty_unit1">
										<td>
					
						<div class="qty">
							<label for="qty1" class="label">Quantity</label><br>
							<input name="qty1" type="number" id="qty1" size="3" class="number">
						</div>
						
										</td>
										<td>
						
						<div class="unit">
							<label for="unit1" class="label">Unit</label><br>
							<select name="unit1" id="unit1" class="required" title="Please choose a unit"> <!--replace with pop-up jQuery menu-->
								<option value="">piece</option>
								<option value="earth">weight</option>
								<option value="mars">volume</option>
								<option value="alpha centauri">length</option>
								<option value="forget about it">area</option>
							</select>
						</div> <!-- unit -->
						
										</td>
									</tr>
								</tbody>
								</table>

							</td>
							<td width="40%" align="center">
						
					</div> <!--qty_unit-->
					<div class="priceper"...

CSS

label.error {
		font-size: 0.8em;
		color: #F00;
		font-weight: bold;
		/*display: block;*/
		/*margin-left: 215px;*/
	}
	input.error, #signup select.error {
		background: #FFA9B8;
		/*border: 1px solid red;*/
	}
	.product {
		/*border: 5px solid green;*/
	}
	.price_qty_unit_calc {
		/*overflow: hidden; /* let the quantity-unit and calc divs sit side-by-side */
		/*border: 1px solid red;*/
	}
	.qty_unit {
		/*overflow: hidden; /* let the quantity and unit divs sit side-by-side */
		float:left;
		padding: 0px 20px 0px 0px;
		/*border: 1px solid green;*/
	}
	.qty {
		float:left;
		padding: 0px 20px 0px 0px;
		/*border: 1px solid yellow;*/
	}
	.unit {
		/*border: 1px solid purple;*/
		clear: both;
	}
	.priceper {
		/*border: 1px solid white;*/
		clear: both;
	}
	.highlighted {
		border: 1px solid red;
        color: #F00;
        font-weight: bold;
	}
	.highlighted0 {
		border: 1px solid yellow;
        color: #F00;
        font-weight: bold;
	}
	.highlighted1 {
		border: 1px solid green;
        color: #F00;
        font-weight: bold;
	}
	.highlighted2 {
		border: 1px solid blue;
        color: #F00;
        font-weight: bold;
	}
/* ***Goal: keep Unit at top of table cell when validation error appears under Quantity. Cosmetic issue.
  td .unit {
    vertical-align:text-top;
  }
*/

JavaScript

console.log("Running jQuery"); // debugging


		$('.price,.qty').change(reCalc);					// recalculate unit price when product price or qty changed

		// Run on page load (document ready)
		
		// *** activate reCalc on page load if price and qty fields filled in. Inputs are undefined until changed...
		// Cycle through each product; calculate its unit price if price and qty are > 0
		$('#products').find('.product').each(function(i){
			//console.log("Running initial .each on product " + i);	// debugging
			//$(this).addClass('highlighted'+i);	// debugging
			reCalc;
		});
		
		$('#priceper').validate();/*{
			rules: {
				email: {
					required: true,
					email: true
				}, // end email rules
				password: {
					required: true,
					rangelength:[8,16]					
				}, // end password rules
				confirm_password: {
					equalTo:'#password' // validate is equal to input with id=password
				} // end confirm_password rules
			}, // end rules
			messages: {
				email: {
					required: "Please supply your email address.",
					email: "This is not a valid email address"
				}, 											// end email messages
				password: {
					required: "Please choose a password.",
					rangelength: "Password must be between 8 and 16 characters long"
				},											// end password messages
				confirm_password: {
					equalTo: "The two passwords do not match."
				}											// end confirm_password messages
			}, // end messages
			errorPlacement: function(error, element) {
				if ( element.is(":radio") || element.is(":checkbox")) {
					error.appendTo(element.parent());
				} else {
					error.insertAfter(element);					
				}
			} // end errorPlacement
		}); // end validate() */

	// Recalculate this product's unit price if both price and qty are > 0
	function reCalc() {
		console.log("Running reCalc");															// debugging
		$product = $(this).parents('.product');				// go up DOM until find .product
		$qty = $product.find('.qty input');					// get qty field of this...