2012-12-13 18 views
1

我很新的knockout.js和基本知識了,但我很困惑如何去檢查輸入。我使用PHP來獲取POST信息並創建表單。檢查輸入與knockout.js和PHP

我有一個動態生成文本框的窗體。假設我提交表單,其中一個值不符合標準。表格現在被重置,一切都是空的。用PHP我只是設置框中的值=什麼被張貼,但由於淘汰賽使用以下語法我不知道做什麼用的公佈值

這裏是我的javasctipt

//misc_form.js 
function Form_Entry(name) { 
    var self = this; 
    self.name = ko.observableArray([]); 
} 

function EntriesViewModel() { 
    var self = this; 
    self.entries = ko.observableArray(); 

    self.add_entry = function() { 
     if(self.entries().length < 3){ 
     self.entries.push(new Form_Entry()); 
     } 
    } 
    self.remove_entry = function(name) { self.entries.remove(name) } 

} 
ko.applyBindings(new EntriesViewModel()); 

和HTML

<table> 
    <thead><tr> 
    <th>Field Name</th><th></th> 
    </tr></thead> 
    <form method="post"> 
     <tr><td>Form Name</td><td><input type="textbox" name="form_name"/></td></tr> 
     <tbody data-bind="foreach: entries"> 
     <tr> 
     <td>Label</td><td><input data-bind="value: name"/></td> 
     <td><a href="#" data-bind="click: $root.remove_entry">Remove</a></td> 
     </tr>  
    </tbody> 
</table> 
<button data-bind="click: add_entry">Add Input Textbox</button> 

    <br> 
    <br> 

    <input type="hidden" name="entries" data-bind="value: ko.toJSON(entries)" /> 
    <button type="submit">Submit Form</button> 
    </form> 

回答

2

後通過$.ajax形式,並傳回不驗證(如JSON也許)的任何值,則只需設置你已經綁定到文本框中這些傳回的觀測值從驗證到顯示用戶。

有很多方法可以做到這一點,這些方針的東西:

JS:

//in view model 
var self = this; 
this.textBox1 = ko.observable(); 
//... 

//validate 
$.ajax({ 
    url: 'validateForm.php', 
    success: function(data) { 
    if (data.success === false) { 
     //set value of textbox back to old value 
     self.textBox1(data.textBox1); 
     //and so on... 
    } 
    } 
}); 

HTML:

<input data-bind="value: textBox1" /> 

PHP:

//validate... 
//.... 
$returnData = array('success' => FALSE, 'textBox1' => $textBox1Val); 
echo json_encode($returnData); 

更新:更新代碼後,我創建了一個jsFiddle,其中包含更新代碼。敲除期望正確的標記正常工作(您的<table><form>嵌套),並且我已經添加了關於如何使提交按鈕調用JS函數的示例代碼。

你可以看到這裏的代碼:http://jsfiddle.net/3sduY/1/

+0

我更新我上面的代碼來顯示我有什麼。我試圖將提交按鈕綁定到一個函數,但它不起作用。你能提供一些建議嗎? – user1852176

+0

@ user1852176我已更新我的答案並提供更多信息 – peacemaker

+0

非常感謝您的幫助! – user1852176