将Jquery验证插件添加到敲除组件的位置

将Jquery验证插件添加到敲除组件的位置,jquery,validation,knockout.js,Jquery,Validation,Knockout.js,我编写了一个淘汰组件,而ViewModel和模板位于单独的文件中,由RequireJs加载 该组件是一个简单的表单,输入字段很少。现在我想在表单上添加Jquery验证插件。我应该设置哪些验证设置?在主html、模板html或ViewModel js上 Index.html <order-ticket params="symbol:symbol,stockname:stockname,state:state,price:price,qty:qty"></order-ticket&

我编写了一个淘汰组件,而ViewModel和模板位于单独的文件中,由RequireJs加载

该组件是一个简单的表单,输入字段很少。现在我想在表单上添加Jquery验证插件。我应该设置哪些验证设置?在主html、模板html或ViewModel js上

Index.html

<order-ticket params="symbol:symbol,stockname:stockname,state:state,price:price,qty:qty"></order-ticket>

<script type="text/javascript">
ko.components.register('order-ticket', {
    viewModel: { require: 'files/component-order-ticket' },
    template: { require: 'text!files/component-order-ticket.html' }
});

function MyViewModel() {
    this.state = ko.observable('new');
    this.symbol = ko.observable('IBM');
    this.stockname = ko.observable('HSBC');
    this.price = ko.observable(100);
    this.qty = ko.observable(50);
}

ko.applyBindings(new MyViewModel());

</script>
/文件/component-order-ticket.html

<form id="OrderTicketForm" method="post">
    <div>
        Symbol: <input type="text" name="symbol" data-bind="value: symbol"><br />
        Stock: <span data-bind="text: stockname"></span><br />
        Price: <input type="text" name="price" data-bind="value: price"><br />
        Qty: <input type="text" name="qty" data-bind="value: qty"><br />
        <input type="submit" />
    </div>
</form>

如果你问10个开发者,你会得到11个不同的答案。我个人会把它放在.js文件中

<form id="OrderTicketForm" method="post">
    <div>
        Symbol: <input type="text" name="symbol" data-bind="value: symbol"><br />
        Stock: <span data-bind="text: stockname"></span><br />
        Price: <input type="text" name="price" data-bind="value: price"><br />
        Qty: <input type="text" name="qty" data-bind="value: qty"><br />
        <input type="submit" />
    </div>
</form>
$("#OrderTicketForm").validate({
    rules: {
        symbol: {required:true},
        stock: {
            required: true
        }
  });