javacriptまたはjqueryを使用した検証

追加ボタンをクリックすると、動的にテキストボックスを作成する方法。javacriptまたは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

はい動的に作成されたテキストボックスを検証しますか？ – specialuser

テキストボックスを作成してIDを割り当て、getElementById（）それが存在することを確認するために – alfasin

これをコピーしてテストしてみてください。そしてそれがあなたの必要に応じていると教えてください。

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

は、テキストボックスを作成した後：

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

関数はaddElement（）{ intTextBox = intTextBox + 1; VARのコンテンツID =のdocument.getElementById（ 'コンテンツ'）; VAR newTBDiv =のdocument.createElement（ 'DIV'）; newTBDiv。setAttribute（ 'id'、 'strText' + intTextBox）;newTBDiv.innerHTML = "テキスト" + intTextBox + "：<入力タイプ= 'テキスト' id = '" + intTextBox + "'名前= '" + intTextBox + "' />"; contentID.appendChild（newTBDiv）; } – specialuser

上記のコードでは、テキストボックスの検証を作成しました。 – specialuser

このjQuery Validation Pluginを使用できます。 demoは、それがテキストボックスを検証できることを示しています。

出典

2012-02-27 07:55:42 PiTheNumber

– specialuser

function addSense（sense）{コメント。コンテンツ+センス; } – PiTheNumber

質問がたくさんあります。次のようなコードを使用して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

javacriptまたはjqueryを使用した検証

答えて

関連する問題