Add object to an KnockoutJS after input validation
<p>I want to validate the user input before adding the object to an observable. For example if I have two fields, say Quantity and Price, before adding the object to the observable I want to validate the user input.
How can I achieve this behavioral?</p>

<p>The code that I have so far:</p>

<pre><code>self.productPriceAdd = function () {
    var newPrice = {
        Quantity: self.newProductPriceEntry.Quantity(),
        Price: self.newProductPriceEntry.Price(),
        ProductBarcode: self.productPrices().Barcode
    }
    self.productPrices().ProductSalePrices().push(newPrice);
    self.productPrices().ProductSalePrices(self.productPrices().ProductSalePrices());
    self.newProductPriceEntry.Quantity(null);
    self.newProductPriceEntry.Price(null);
}
</code></pre>

<p>The user interface looks somethig like this:</p>

<p><a href="https://i.stack.imgur.com/4QpVD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4QpVD.png" alt="enter image description here"></a></p>

<p>So after the user clicks the Add button, two error messages should be displayed, one for each empty field. </p>

<p>My HTML code:</p>

<pre><code>&lt;!-- ko if: productPrices() --&gt;
&lt;div class="col-md-4"&gt;
&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;h2 class="panel-title"&gt;&lt;b data-bind="text: productPrices().Name"&gt;&lt;/b&gt;&lt;/h2&gt;
    &lt;/div&gt;
    &lt;table class="table"&gt;
        &lt;tr&gt;
            &lt;th&gt;
                @Html.DisplayName("Quantity")
            &lt;/th&gt;
            &lt;th&gt;
                @Html.DisplayName("Price")
            &lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;

        &lt;tbody data-bind="foreach: productPrices().ProductSalePrices()"&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;b data-bind="text: Quantity"&gt;&lt;/b&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;b data-bind="text: Price"&gt;&lt;/b&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;a href="#" data-bind="click: $parent.productPriceRemove" class="btn btn-defaul"&gt;Remove&lt;/a&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;

        &lt;tbody data-bind="with: newProductPriceEntry"&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;input type="number" class="form-control" data-bind="value: Quantity " placeholder="Quantity"&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type="number" step="0.01" class="form-control" data-bind="value: Price " placeholder="Price"&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;a href="#" data-bind="click: $parent.productPriceAdd" class="btn btn-defaul"&gt;Add&lt;/a&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;

    &lt;/table&gt;
&lt;/div&gt;
&lt;a href="#" data-bind="click: productPriceSave" class="btn btn-defaul"&gt;Save&lt;/a&gt;
</code></pre>

<p>
</p>