Javascript form validation before post

[moosey_man1988]

Hi everyone Im having a nightmare with javascript again grrrr, I'm just not great with javascript / jquery

 

so basically I have a table with inputs to create an invoice, the reason im using javascript to post the form is because i have to allow for infinite items to be added into the database

using json stringify as an array, the problem I have is im trying to force that atleast 1 item be added to the table before posting the data.

 

I am using bootstrap and this hasn't been a problem for all of my other forms because i can just add required to the input but because i have to do this one differently using an a href button

This form just wont validate (but it will post the data to the php script)

 

so here is my code: 

 

Table with inputs: 

	<tbody style="" class="item ui-sortable-handle">
			<tr>
				<td rowspan="2" class="td-icon">
					<i class="glyphicon glyphicon-resize-vertical cursor-move"></i>
				</td>
				<td class="td-text">
						<input type="hidden" name="invoice_id" value="<?php echo $invoiceNo;?>">
						<input type="hidden" name="item_id" value>
					<div class="input-group">
						<span class="input-group-addon">Item</span>
						<input type="text" name="item_name" class="input-sm form-control" required>
					</div>
				</td>
				<td class="td-amount td-quantity">
						<div class="input-group">
							<span class="input-group-addon">Quantity</span>
							<input type="text" name="item_quantity" class="input-sm form-control amount">
						</div>
				</td>
				<td class="td-amount">
					<div class="input-group">
							<span class="input-group-addon">Price</span>
							<input type="text" name="item_price" class="input-sm form-control amount">
					</div>
				</td>
				<td class="td-amount">
					<div class="input-group">
						<span class="input-group-addon">Item Discount</span>
						<input type="text" name="item_discount_amount" class="input-sm form-control amount" data-toggle="tooltip" data-placement="bottom" title data-original-title="£ Per Item">
					</div>
				</td>
					<td class="td-amount">
						<div class="input-group">
							<span class="input-group-addon">Tax Rate</span>
							<select name="item_tax_rate_id" class="form-control input-sm">
								<?php
								//this section may update based upon selections but for now We have none
								echo "<option value='0'>None</option>";
								?>
							</select>
						</div>
					</td>
					<td class="td-icon text-right td-vert-middle"></td>
			</tr>
			<tr>
				<td class="td-textarea">
					<div class="input-group">
						<span class="input-group-addon">Description</span>
						<textarea name="item_description" class="input-sm form-control"></textarea>
					</div>
				</td>
				<td colspan="2" class="td-admount td-vert-middle">
					<span>Subtotal</span>
					<br>
					<span name="subtotal" class="amount"></span>
				</td>
				<td class="td-amount td-vert-middle">
					<span>Discount</span>
					<br>
					<span name="item_discount_total" class="amount"></span>
				</td>
				<td class="td-amount td-vert-middle">
					<span>Tax</span>
					<br>
					<span name="item_tax_total" class="amount"></span>
				</td>
				<td class="td-amount td-vert-middle">
					<span>Total</span>
					<br>
					<span name="item_total" class="amount"></span>
				</td>
			 </tr>
		 </tbody>

	 </table>
 	</form>
  </div>
 </div>
 <!-- End of items Tables-->

The Save button at the top of the page before the table:

<a href="#" class="btn btn-success ajax-loader" id="btn_save_invoice">

And lastly my attempt at the javascript / jquery / ajax:

<script type="text/javascript">
	$('#btn_save_invoice').click(function () {


		$('#item_form').validate({
		rules: {
			item_name:{
					required: true,
					message: 'This is required'
				}
			},
		});

					var items = [];
					var item_order = 1;
					$('table tbody.item').each(function () {
							var row = {};
							$(this).find('input,select,textarea').each(function () {
									if ($(this).is(':checkbox')) {
											row[$(this).attr('name')] = $(this).is(':checked');
									} else {
											row[$(this).attr('name')] = $(this).val();
									}
							});
							row['item_order'] = item_order;
							item_order++;
							items.push(row);
					});
					$.post("<?php echo url()."Clients/invoice_ajax.php"; ?>", {
									invoice_id: <?php echo $invoice_id; ?>,
									invoice_number: $('#invoice_number').val(),
									invoice_date_created: $('#invoice_date_created').val(),
									invoice_date_due: $('#invoice_date_due').val(),
									invoice_status_id: $('#invoice_status_id').val(),
									invoice_password: $('#invoice_password').val(),
									items: JSON.stringify(items),
									invoice_discount_amount: $('#invoice_discount_amount').val(),
									invoice_discount_percent: $('#invoice_discount_percent').val(),
									invoice_terms: $('#invoice_terms').val(),
									custom: $('input[name^=custom]').serializeArray(),
									payment_method: $('#payment_method').val()
							},
							function (data) {
									var response = JSON.parse(data);
									if (response.success == '1') {
					                         window.location = "<?php echo url()."Clients/invoice_ajax.php"; ?>/" + <?php echo $invoice_id; ?>;
					                     }
					                     else {
					                         $('#fullpage-loader').hide();
					                         $('.control-group').removeClass('has-error');
					                         $('div.alert[class*="alert-"]').remove();
					                         var resp_errors = response.validation_errors,
					                             all_resp_errors = '';
					                         for (var key in resp_errors) {
					                             $('#' + key).parent().addClass('has-error');
					                             all_resp_errors += resp_errors[key];
					                         }
					                         $('#invoice_form').prepend('<div class="alert alert-danger">' + all_resp_errors + '</div>');
					                     }
					                 });
					         });

</script>

Please bare in mind the actual posting section of the form Works perfectly! the only issue is the inputs will not validate before post.

 

here is what the page looks like (i have highlighted the parts that I am referring to in the post:

 

 

I really am thankful for all the help i get, a huge thank you in advance to anyone who helps with this.

 

 

 

 

 

[moosey_man1988]

Solved it by putting some javascript If statements on button click.