To validate dynamic elements in the table

Question

I want to validate the dynamically created textarea, In the below mentioned code i can able to validate only the first row but i can't validate for the second row.How to validate/get all the row values.

Thanks in advance.

To create Dynamic elements click add question image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function ()
    {
        var i = 0;
        $("#AddQuestion").click(function ()
        {
            $("#NoQuestions").remove();
            ++i;
            var IdCount = i + ".)";
            var newRowContent = "<tr id='SQRow"+i+"'"+" ><td>" + IdCount + "</td>" + "<td><textarea id='txtQuestions" + i + "'" + "style='height: 45px;width: 420px'></textarea> </td>" + "<td><select id='ddlDataType" + i + "'" + " style='margin-left: 47px'><option value=''>Select Data Type</option><option value='int'>Numeric</option><option value='Varchar'>Alpha Numeric</option></select> </td>" + "<td><div ><a href='#'><img src='/Images/1363247672_document-edit.png' width='26' height='27' alt='EditButton'/> </a><a href='#'><img src='/Images/1363247321_Remove.png' alt='DeleteButton'/></a> </div> </br><div  style='display: none'><a href='#'><img src='/Images/Accept-iconSmall.png' width='26' height='27' alt='UpdateButton'/></a><a href='#'><img src='/Images/Button-Cancel-icon.png' width='26' height='27' alt='CancelButton'  /></a></td>" + "</tr>";

            $("#tblSecurityQuestions").append(newRowContent);
        });
        $("#btnUpdateQuestions").click(function ()
        {
            var txtAreaVal = $('textarea').val().length;
            var ddlDataType = $('#tblSecurityQuestions select').val().length;

            alert(txtAreaVal);
            alert(ddlDataType + "The ddl is " );
        if (txtAreaVal <= 0)
        {
            alert('Please add Questions');
            return;
        } else if (ddlDataType <= 0)
        {
            alert('Please select the data type');
            return;
        }
        });

    });
    </script>
</head>
 <body>
    <form id="SQPageForm" name="SQPageForm" method="post" action="">
            <div id="SecurityQuestions" style="height: auto;border-color: #f00;border: 1.5px;border-style: dotted">

               <h3>Configure Security Questions</h3>
                <div id="AddNewSecurityQuestions" style="">
                    <p style="float: left;margin-top: 11px">Add Question </p>

                   <img id="AddQuestion" src="/Images/document-add-icon.png" alt="Add Questions" width="35px" height="35px" style="cursor: pointer"/>
                </div>
                </br>
              &nbsp;Security  Questions?
                </br>

                <table border="1" id="tblSecurityQuestions">
                    <tr>
                        <th style="width: 25px">
                            ID
                        </th>
                        <th style="width: 424px">
                            Security Questions
                        </th>
                        <th style="width: 210px">
                            DataType
                        </th>
                        <th style="width   :65px">
                            Actions
                        </th>

                    </tr>
                      </table>
                     </div>
                </br>
                </br>
                <input type="button" id="btnUpdateQuestions" value="Set Security Question" style="margin-left: 300px" />
 </body>
</html>

Answer 1

Try to iterate all text areas, then check the same condition:

for(var i=0; i<NoOfquestions; i++){

    var txtAreaVal = $('#txtQuestions'+i).val().length;
    var ddlDataType = $('#tblSecurityQuestions select').val().length;

    alert(txtAreaVal);
    alert(ddlDataType + "The ddl is");

    if (txtAreaVal <= 0)
    {
        alert('Please add Questions');
        return;
    }
    else if (ddlDataType <= 0)
    {
        alert('Please select the data type');
        return;
    }
}

Answer 2

Try

$("#btnUpdateQuestions").click(function() {
    $('#tblSecurityQuestions tr:gt(0)').each(function() {
        var $this = $(this);
        var txtAreaVal = $('textarea', $this).val().length;
        var ddlDataType = $('select', $this).val().length;

        alert(txtAreaVal);
        alert(ddlDataType + "The ddl is ");
        if (txtAreaVal <= 0) {
            alert('Please add Questions');
            return;
        } else if (ddlDataType <= 0) {
            alert('Please select the data type');
            return;
        }
    })
});

Answer 3

var textAreaSize = $('#tblSecurityQuestions tr:gt(1)').size();

        for (var j = 1; j <= textAreaSize; j++)
        {
            var txtAreaVal = $('#txtQuestions' + j).val();
            var ddlDataType = $('#ddlDataType' + j).val();  
           if (txtAreaVal <= 0)
            {
                alert('Please add Questions');
                return;
            } else if (ddlDataType <= 0)
            {
                alert('Please select the data type');
                return;
            }
        }

I came up with a solution, it is working for me now

To validate dynamic elements in the table

Question

3 answers

solution1
0 2013-03-19 04:10:55

solution2
0 2013-03-19 04:19:47

solution3
0 2013-03-19 07:02:51

To validate dynamic elements in the table

Question

3 answers

solution1 0 2013-03-19 04:10:55

solution2 0 2013-03-19 04:19:47

solution3 0 2013-03-19 07:02:51

solution1
0 2013-03-19 04:10:55

solution2
0 2013-03-19 04:19:47

solution3
0 2013-03-19 07:02:51