動態添加，驗證和刪除表單字段集

我想創建一個網頁，用戶可以通過一個添加按鈕添加和刪除表單字段集，並刪除與要刪除的集相關的按鈕。輸入的值將通過jquery validate進行檢查，同時動態添加規則。請參閱以下我的目標表單的簡化示例：動態添加，驗證和刪除表單字段集

什麼是用於添加，刪除和驗證表單字段集合的JavaScript代碼的良好結構？我也搜索了這個網站 - 並且有很多用於添加表單域的javascript示例。我喜歡我在查看源代碼中找到的示例：http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm，它使用表單模板。但我特別掙扎與JavaScript編碼爲刪除按鈕..（其不是在示例）

我的目標（簡化的）形式（使用模板1套3 formfields）：

<form name="myForm" id="myForm" method="post" action=""> 
    <input id="name1" name="name1" /> 
    <input id="email1" name="email1" /> 
    <input id="phone1" name="phone1" /> 
    <input type="submit" value="Save"> 
</form>

來源

2013-08-29 Joppo

我認爲你應該對錶格進行模板化。即將它包裝在一個函數中，所以你可以一次又一次地創建它。這裏是一個的jsfiddle http://jsfiddle.net/krasimir/2sZsx/4/

HTML

<div id="wrapper"></div> 
<a href="#" id="add-form">add form</a>

var wrapper = $("#wrapper"); 
var addForm = $("#add-form"); 
var index = 0; 

var getForm = function(index, action) { 
    return $('\ 
     <form name="myForm" id="myForm" method="post" action="' + action + '">\ 
      <input id="name' + index + '" name="name' + index + '" />\ 
      <input id="email' + index + '" name="email' + index + '" />\ 
      <input id="phone' + index + '" name="phone' + index + '" />\ 
      <input type="submit" value="Save">\ 
      <a href="#" class="remove">remove form</a>\ 
     </form>\ 
    '); 
} 

addForm.on("click", function() { 
    var form = getForm(++index); 
    form.find(".remove").on("click", function() { 
     $(this).parent().remove(); 
    }); 
    wrapper.append(form); 
});

來源

2013-08-29 21:32:12 Krasimir

日Thnx，非常有用的從你的榜樣，我注意到我因此未形容我的上下文清楚地（！）各種表單集應該是單一的形式（只有一個保存按鈕）。但我可以從你的例子中解決這個問題。人們可以在addForm onclick函數中添加jquery驗證規則，是否正確？ – Joppo

是的，eaxactly。您可以將更多事件附加到* form *中，並使用相同的方法實際編寫驗證。 – Krasimir

thnx。我的驗證碼還不正確。我添加了「$（」＃email「+ index）.rules（」add「，{required：true，email：true}）;」在'wrapper.append（form）;'下面語句，然後在addForm函數下添加validate（）函數。任何想法可能會出錯？ – Joppo

當你的表單提交，從而

簡單的驗證可以做到：

$('#myForm').submit({ 
    var n1 = $('#name1').val(); 
    var e1 = $('#email1').val(); 
    var p1 = $('#phone1').val(); 

    if (n1=='' || e1=='' || p1=='') { 
     alert('Please complete all fields'); 
     return false; 
    } 
});

注意，return false會中止提交併返回用戶到文檔。

添加/刪除表單字段大碼可以在這個問題上找到：https://stackoverflow.com/questions/18520384/removing-dynamically-generated-textboxes-in-jquery

jsFiddle here

來源

2013-08-29 21:32:14 gibberish

動態添加，驗證和刪除表單字段集

回答

相關問題