Question

如何通过单击按钮验证动态创建的文本框。如果单击提交按钮，动态创建的文本框应验证regexp。如果它是空的，请在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>

Answer 1

您可以使用jQuery迭代<form> <input>并将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;
}

Answer 2

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

以上代码有效!!

Answer 3

纯JavaScript代码

点击Demo

您在提交按钮点击事件属性中又犯了一个拼写错误。它是onlick。：）

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

由于

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

3 个答案: