knockout validation is not workong

Question

I have a form to be validated using knockout JS.The form along with KnockOut JS Script is available here http://jsfiddle.net/gy8qwLk1/ I want to submit the form after validation true to be true. Here is my script:

    /// <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

In your function "addCustomer" I don't see anything that checks if validation has failed or not .. and there are a couple of things that need to be worked out as well.

  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;
  }

the framework will generate the UI elements required to display validation messages ... so no need to create those up front.

you might need to put in some work to the script but as a starting point please refer to the jsfiddle http://jsfiddle.net/wfpacsgw/3/ for a working version of your script.