2015-11-16 66 views
1

我有一個表格要使用基因敲除JS進行驗證。表格與KnockOut JS腳本一起在這裏可用 http://jsfiddle.net/gy8qwLk1/ 我想在驗證後提交表單爲true。 這裏是我的腳本:基因敲除驗證不是workong

/// <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' 
    }); 


}); 

回答

2

在你的函數「addCustomer」我沒有看到任何東西來檢查,如果驗證失敗或不..並有一對夫婦的需要一併制定的東西。

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/以獲取腳本的工作版本。

+0

它在小提琴手中運行良好。但是當我在Visual Studio中運行時,我擊中'Uncaught TypeError:無法讀取未定義'屬性'組'錯誤 –

+0

可能是ko,ko.mapping和ko在提琴手和你的視覺工作室中使用的.validation庫是不同的。確保它們是相同的。 –

+0

他們是一樣的。我只是複製你的腳本,並將其粘貼到visual studio中。我查看參考文獻,他們是相同的,並在我的腳本文件夾中可用 –