Question

我有一个使用knockout JS验证的表单。此处提供了表单以及KnockOut JS Script http://jsfiddle.net/gy8qwLk1/ 我想在验证后提交表格为真。这是我的剧本：

    /// <reference path="../Scripts/knockout-3.1.0.js" />
/// <reference path="../Scripts/jquery-1.10.2.js" />
/// <reference path="../Scripts/knockout.validation.js" />

var customerRegisterViewModel;

function Customervalidate(id, customerName, contactName, address, city, postalCode, country) {
    var self = this;
    self.ID = ko.observable(id);
    self.CustomerName = ko.observable(customerName).extend({ required: { message: 'Customer Name is required' } });
    self.ContactName = ko.observable(contactName).extend({ required: true });
    self.Address = ko.observable(address).extend({ required: true });
    self.City = ko.observable(city).extend({ required: true });
    self.PostalCode = ko.observable(postalCode).extend({ required: true });
    self.Country = ko.observable(country).extend({ required: true });
}


function Customer(id, customerName, contactName, address, city, postalCode, country) {
    var self = this;

    self.ID = ko.observable(id);
    self.CustomerName = ko.observable(customerName).extend({ required: {message :'Customer Name is required' }});
    self.ContactName = ko.observable(contactName).extend({ required: true });
    self.Address = ko.observable(address).extend({ required: true });
    self.City = ko.observable(city).extend({ required: true });
    self.PostalCode = ko.observable(postalCode).extend({ required: true });
    self.Country = ko.observable(country).extend({ required: true });

    self.addCustomer = function () {
        var dataObject = ko.toJSON(this);        

            $.ajax({
                url: '/api/customer',
                type: 'post',
                data: dataObject,
                contentType: 'application/json',
                success: function (data) {
                    customerRegisterViewModel.customerListViewModel.customers.push(new Customer(data.ID, data.CustomerName, data.ContactName, data.Address, data.City, data.PostalCode, data.Country));
                    self.ID(null);
                    self.CustomerName('');
                    self.ContactName('');
                    self.Address('');
                    self.City('');
                    self.PostalCode('');
                    self.Country('');
                }
            });
        }

    };



function CustomerList() {
    var self = this;
    // observable arrays are update binding elements upon array changes
    self.customers = ko.observableArray([]);

    self.getCustomers = function () {
        self.customers.removeAll();

        // retrieve students list from server side and push each object to model's students list
        $.getJSON('/api/customer', function (data) {
            $.each(data, function (key, value) {
                self.customers.push(new Customer(value.ID, value.CustomerName, value.ContactName, value.Address, value.City, value.PostalCode, value.Country));
            });
        });
    };



    // remove student. current data context object is passed to function automatically.
    self.removeCustomer = function (customer) {
        $.ajax({
            url: '/api/customer/' + customer.ID(),
            type: 'delete',
            contentType: 'application/json',
            success: function () {
                self.customers.remove(customer);
            }
        });
    };
}
// create index view view model which contain two models for partial views
customerRegisterViewModel = { addCustomerViewModel: new Customer(), customerListViewModel: new CustomerList(),validateModel : new Customervalidate()  };

// on document ready
$(document).ready(function () {
    //ko.applyBindings(customerRegisterViewModel);
    ko.validatedObservable(customerRegisterViewModel);
    ko.applyBindings(customerRegisterViewModel);


    ko.validation.configure({
        registerExtenders: true,
        messagesOnModified: true,
        decorateElement: true,
        errorClass: 'error',
        insertMessages: true,
        parseInputAttributes: true,
        messageTemplate: 'customMessageTemplate'
    });


});

Answer 1

在你的功能＆＃34; addCustomer＆＃34;我没有看到任何检查验证是否失败的东西......还有一些事情需要解决。

  self.errors = ko.validation.group(self);

  self.isValid = ko.computed(function(){     
        return self.errors().length == 0;
  });

  self.addCustomer = function () {
  if(!self.isValid())
  {
    self.errors.showAllMessages(true);
    return;
  }

框架将生成显示验证消息所需的UI元素......因此无需预先创建这些元素。

您可能需要对脚本进行一些工作，但作为起点，请参阅jsfiddle http://jsfiddle.net/wfpacsgw/3/以获取脚本的工作版本。

淘汰验证不起作用

1 个答案: