如何通过单击按钮验证动态创建的文本框答案

【问题标题】：How to validate the dynamic created textbox by onclick the button如何通过单击按钮验证动态创建的文本框
【发布时间】：2014-09-02 09:50:39
【问题描述】：

如何通过单击按钮验证动态创建的文本框。如果我单击提交按钮，动态创建的文本框应该验证正则表达式。如果它是空的，通过在 div 中输入名称来抛出错误，请不要发出我不想要的警报消息

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
 <title>Untitled Page</title>
<script type="text/javascript">

 var randomId = 0;

function GetDynamicTextBox(value) {
var newRandomIdOfTextBox = "dynamicTextBox" + randomId++ + "";
return '<input name = "DynamicTextBox" type="text" id="' + newRandomIdOfTextBox  +'"   />' +
         '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
  }
 function AddTextBox() {
 var div = document.createElement('DIV');
 div.innerHTML = GetDynamicTextBox("");
 document.getElementById("TextBoxContainer").appendChild(div);
}

function RemoveTextBox(div) {
 document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}

</script>
</head>
 <body>
<form id="Form2" runat="server">
<input id="btnAdd" type="button" value="Add Text" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">

</div>
 <input type="button" value="submit" onlick="validate();"/>
 </form>
 </body>
 </html>

【问题讨论】：

标签： c# javascript jquery html css

【解决方案1】：

纯 JavaScript 代码

点击Demo

您在提交按钮单击事件属性中又犯了一个拼写错误。这是onlick。 :)

<input type="button" value="submit" onclick="validateTextBox()"/>

谢谢

【讨论】：

【解决方案2】：

您可以遍历<form> 的<input>s 并使用jQuery 将validate 函数应用于每个<input>。

$('#Form2 input[type!="button"]').each(function()
{
    return validate($(this));
});

function validate(jElement)
{
    if (!/\S/.test(jElement.val())) 
    {
        alert(jElement.attr('id') + " is incorrect");
        return false;
    }
    return true;
}

Full example.

$(document).ready(function()
{
    var nextId = 0;

    $('#btnAdd').click(function()
    {
        var textInput = $('<input>', { name: "DynamicTextBox", type: "text", id: "dynamicTextBox" + nextId++ });
        var removeInput = $('<input>', { type: "button", value: "remove", class: "remove" });
        var inputContainer = $('<div>');
        textInput.appendTo(inputContainer);
        removeInput.appendTo(inputContainer);
        inputContainer.appendTo($('#TextBoxContainer'));
    });

    $(document).on("click", '.remove', function()
    {
        $(this).parent().remove();
    });

    $('#Form2Submit').click(function()
    {
        $('#Form2 input[type!="button"]').each(function()
        {
            return validate($(this));
        });
    });
});

function validate(jElement)
{
    if (!/\S/.test(jElement.val()))
    {
        alert(jElement.attr('id') + " is incorrect");
        return false;
    }
    return true;
}

【讨论】：

【解决方案3】：

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
 <title>Untitled Page</title>
 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

 var randomId = 0;

function GetDynamicTextBox(value) {
var newRandomIdOfTextBox = "dynamicTextBox" + randomId++ + "";
return '<input name = "DynamicTextBox" class="dynamictext" type="text" id="' + newRandomIdOfTextBox  +'"   />' +
         '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
  }
 function AddTextBox() {
 var div = document.createElement('DIV');
 div.innerHTML = GetDynamicTextBox("");
 document.getElementById("TextBoxContainer").appendChild(div);
}

function RemoveTextBox(div) {
randomId--;
 document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
$(document).ready(function(){
$("#submit").click(function(e){
    e.preventDefault();
    if(randomId !== 0){
        $("#TextBoxContainer").find('.dynamictext').each(function(){
            if($(this).val() === "" || $(this).val() === 'undefined'){
                alert($(this).attr('id') + "is null");
            } // use Regx validation here!!
        })
    }
});
})
</script>
</head>
 <body>
<form id="Form2" runat="server">
<input id="btnAdd" type="button" value="Add Text" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">

</div>
 <input type="button" value="submit"  id="submit"/>
 </form>
 </body>
 </html>

上面的代码有效！！

【讨论】：