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

I am required to make a form in asp.net where I have to use Dynamic text box. With some workaround,I managed to create Textboxes when user click "Add" Button and could also retrieve their values (at Server Side). Now I am facing problem in getting the value at Client side.I want if user click submit without providing any data ,it should not validate the data.

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

Below is the code in Javascript to create Text boxes I used.

下面是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;
        }
    }

This code is executed when ADD button is clicked.

单击ADD按钮时执行此代码。

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

and TextBoxContainer is just an DIV

和TextBoxContainer只是一个DIV

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

Scenario If user click on radio button,he gets a button "ADD" clicking on which ,he can generate dynamic text box.If he clicks and do not provide value,then in my sql,i will get value as "" (that is Ok) but if he click on radio button and without clicking ADD button,submits the form ,I get NULLVALUE exception,

场景如果用户点击单选按钮,他会点击“添加”按钮,他可以生成动态文本框。如果他点击并且不提供值,那么在我的sql中,我将获得值为“”(即好的)但是如果他单击单选按钮而没有单击ADD按钮,则提交表单,我得到NULLVALUE异常,

So basically I want to capture the dynamic text box data on Client Side so that I can validate the data and display error message is value is blank.

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

Should I think of events or what.Any help is appreciated.

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

Thanks

1 个解决方案

#1

check this link where added your code fiddler.

检查此链接添加了您的代码fiddler。

<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;
        }
    }

check this modified code here

在此查看此修改后的代码

added class in input

在输入中添加了类

class="dynamic"

and javascript code

和JavaScript代码

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

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;
            }
        }
    }
}

#1