使用javascript或jquery驗證

如何動態創建文本框，當我單擊添加按鈕。使用javascript或jquery驗證

我把輸入欄放在文本框中。

如何使用javascript或jquery驗證動態創建的文本框。

<html> 
<head> 
<title>Adding and Removing Text Boxes Dynamically</title> 

<script type="text/javascript"> 
var intTextBox=0; 
//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){ 
    intTextBox = intTextBox + 1; 
    var contentID = document.getElementById('content'); 
    var newTBDiv = document.createElement('div'); 
    newTBDiv.setAttribute('id','strText'+intTextBox); 
    newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>"; 
    contentID.appendChild(newTBDiv); 
} 

    </head> 
    <body> 
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
    <p><a href="javascript:addElement();" >Add</a> 
     <a href="javascript:removeElement();" >Remove</a> 
    </p> 
    <div id="content"></div> 
    <input type="button" value="submit"/> 
    </body> 
    </html>

當我點擊提交按鈕，所有的文本框驗證必須完成之後....

來源

2012-02-27 specialuser

你是什麼「驗證文本」是什麼意思？檢查它是否存在？驗證用戶添加到其中的輸入？你是什麼意思「動態創建文本框 - 當發生什麼事件時動態創建？ – alfasin 2012-02-27 07:51:46

是驗證動態創建的文本框....是否有可能？ – specialuser 2012-02-27 07:53:37

當然，當你創建文本框時用ID指定它，然後使用getElementById（）以確保它存在 – alfasin 2012-02-27 07:54:45

試着複製這個和測試。讓我們告訴我，這是你需要的。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Adding and Removing Text Boxes Dynamically</title> 

<script type="text/javascript"> 
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){ 
    intTextBox += 1 
    var contentID = document.getElementById('content'); 
    var newTBDiv = document.createElement('div'); 
    newTBDiv.setAttribute('id','strText'+intTextBox); 
    newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "' name='" + intTextBox + "' />"; 
    contentID.appendChild(newTBDiv); 
} 

function removeElement(){ 
    var element = document.getElementById("strText"+intTextBox); 
    console.log(element); 
    while (element.firstChild) { 
     element.removeChild(element.firstChild); 
    } 
    intTextBox -=1; 
} 
</script> 
</head><body> 
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
<p><a href="javascript:addElement()" >Add</a> 
    <a href="javascript:removeElement();" >Remove</a> 
</p> 
<div id="content"></div> 
<input type="button" value="submit"/> 
</body> 
</html>

多見於My jsFiddle

注：與Firefox & Chrome的工作

來源

2012-02-27 09:07:04 OammieR

其中的k ..但如何驗證輸入文本框... – specialuser 2012-02-27 09:49:14

創建文本框：

var textbox = $('<input></input>'); 
textbox.setAttr(type, 'text');

放入容器：

$('#button').onclick(function() { 
    $('#container').append(textbox); 
});

驗證：

$('#submit').onclick(function() { 
    if(!$('#textbox').val()) { 
     alert('input empty'); 
    } 
});

來源

2012-02-27 07:55:13

這隻用於單個文本框..但我要求動態創建的文本框驗證.. – specialuser 2012-02-27 08:37:28

功能的addElement（） { intTextBox = intTextBox + 1; 變種內容識別=的document.getElementById（ '內容'）; VAR newTBDiv =使用document.createElement（ 'DIV'）; newTBDiv。的setAttribute（ '編號'， 'strText的' + intTextBox）; newTBDiv.innerHTML =「Text」+ intTextBox +「：」; contentID.appendChild（newTBDiv）; } – specialuser 2012-02-27 08:40:02

我問過上面代碼創建的文本框驗證... – specialuser 2012-02-27 08:40:52

您可以使用此jQuery Validation Plugin。 demo顯示可以驗證文本框。

來源

2012-02-27 07:55:42 PiTheNumber

– specialuser 2012-02-27 08:39:28

function addSense（sense）{comment.content + = sense; } – PiTheNumber 2012-02-27 11:33:11

這是很多問題彙總成一個。您可以創建並使用代碼插入jQuery的元素如下所示：

$('<input />', {type : 'text'}).appendTo($(body));

至於驗證而言，這將取決於當你想這樣做的。在按鍵上提交，在模糊等，如果你想在頁面加載後毯子驗證了你需要，因爲在創建這些文本框將其委託給一些父元素的所有輸入：

$('body').delegate('input','keyup', function(){ 
    /*Do stuff*/ 
});

但如果創建元素時您還可以附加驗證，如果它需要特定於您創建的字段。

$('<input />', {type : 'text'}).bind('keyup', function(){ 
    /*Do stuff*/ 
}).appendTo($(body));

我希望你能朝正確的方向前進。祝你好運

來源

2012-02-27 08:42:19 Marlin

謝謝...我會試試...... – specialuser 2012-02-27 08:51:01

使用javascript或jquery驗證

回答

相關問題