Im not exactly adept at coding so Im probably missing something, but my view here is failing to refuse submission when one or both of the fields are empty. I have a feeling something isnt connected right to my template for the row and the view of the form
Form = Backbone.View.extend({ //form vie
el: '.item-form',
initialize: function(){
},
events: {
'click #additem': 'addModel'
},
addModel: function(itemName, price){
// simple validation before adding to collection
if (itemName !="" && price !="" ){
var item = new Item({
itemName: this.$("#item").val(),
price: this.$("#price").val()});
items.add(item);
$("#message").html("Please wait; the task is being added.");
item.save(null, {success:
function (item, response,options) {
item.id= item.attributes._id.$id;
item.attributes.id = item.attributes._id.$id;
new ItemsView({collection: items});
$("#message").html("");
}
});
this.$("#item").val('');
this.$("#price").val('');
} else {
alert('Please fill in both fields');
}
}
});
and
HTML
<table class="itemTable">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody class="tableBody">
<script type="text/template" id="table-row">
<td><%= itemName %></td> <td><%= price %></td> <td><button class="complete">Complete</button> <button class="remove">Remove</button></td>
</script>
</tbody>
</table>
<form class="item-form">
<input type="text" name="item" id="item" placeholder="Item"/> <!-- goes to itemName in the template for the body -->
<input type="text" name="price" id="price" placeholder="Price" /><!--goes to price in the template for the body -->
<button type="button" id="additem">Add</button>
</form>
<div id="message"></div>
