验证客户端动态文本框中的数据

Question

我需要在 asp.net 中制作一个表格，我必须使用动态文本框。 通过一些解决方法，当用户单击“添加”按钮时，我设法创建了文本框，并且还可以检索它们的值（在服务器端）。 现在我在客户端获取值时遇到问题。我希望如果用户点击提交而不提供任何数据，它不应该验证数据。

以下是我使用的用于创建文本框的 Javascript 代码。

 function GetDynamicTextBox(value) {
        return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
            '<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);
    }

    function RecreateDynamicTextboxes() {
        var values = eval('<%=Values%>');
        if (values != null) {
            var html = "";
            for (var i = 0; i < values.length; i++) {
                html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
            }
            document.getElementById("TextBoxContainer").innerHTML = html;
        }
    }

当点击添加按钮时执行此代码。

<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" class="ANPClass"/>

而 TextBoxContainer 只是一个 DIV

<div id="TextBoxContainer" style="text-align: center;" class="step" >
</div>

场景 如果用户点击单选按钮，他会得到一个按钮“添加”点击它，他可以生成动态文本框。如果他点击并且不提供值，那么在我的 sql 中，我将得到值作为“”（那是好的) 但是如果他点击单选按钮而不点击添加按钮，提交表单，我得到 NULLVALUE 异常，

所以基本上我想在客户端捕获动态文本框数据，以便我可以验证数据并显示错误消息是值是空白的。

我应该考虑事件还是什么。感谢任何帮助。

谢谢

Answer 1

检查此link 添加您的代码提琴手。

<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" class="ANPClass"/>
<div id="TextBoxContainer" style="text-align: center;" class="step" >
</div>
<input type="button" value="save" onclick="validate();" />

Javascript

function GetDynamicTextBox(value) {
        return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
            '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
    }
function validate()
{
    var inp = document.getElementsByTagName('input');
    for(var i in inp){
        if(inp[i].type == "text"){
            if(!/^\d{1,}$/.test(inp[i].value)){
                alert('Invalid value detected');
                inp[i].focus();
                break;
            }
        }
    }
}

function AddTextBox() {
        var div = document.createElement('DIV');
        div.innerHTML = GetDynamicTextBox("");
        document.getElementById("TextBoxContainer").appendChild(div);
    }

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

    function RecreateDynamicTextboxes() {
        var values = eval('<%=Values%>');
        if (values != null) {
            var html = "";
            for (var i = 0; i < values.length; i++) {
                html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
            }
            document.getElementById("TextBoxContainer").innerHTML = html;
        }
    }

检查这个修改后的代码here

在输入中添加类

class="动态"

和javascript代码

var inp = document.getElementsByClassName('dynamic');

function validate()
{
    var inp = document.getElementsByClassName('dynamic');
    for(var i in inp){

        if(inp[i].type == "text"){
            if(!/^\d{1,}$/.test(inp[i].value)){
                alert('Invalid value detected');
                inp[i].focus();
                break;
            }
        }
    }
}