
A Dynamic table is above which we will validate.
code to Create Dynamic table is Below:
$(document).ready(function () {
$(‘#btnAdd’).click(function (event) {
event.preventDefault();
AddRow();
});
$(‘#btnRemove’).click(function () {
DeleteRow();
});
$(‘#btnsubmit’).click(function () {
return validate();
});
});
function AddRow() {
$(‘#tblXml’).hide(“fast”);
var id = document.getElementById(‘tblXml’);
var rowCount = id.length;
var row = id.insertRow(rowCount);
// cell 1
var cell1 = row.insertCell(0);
var element1 = document.createElement(“input”);
element1.type = “text”;
element1.name = “Name”;
cell1.appendChild(element1);
//cell 2
var cell2 = row.insertCell(1);
var element2 = document.createElement(“input”);
element2.type = “text”;
element2.name = “Mobile”;
cell2.appendChild(element2);
//cell 3
var cell3 = row.insertCell(2);
var element3 = document.createElement(‘select’);
element3.type = “option”;
element3.name = “Fruit”;
element3.options[0] = new Option(‘-Select Fruit-‘, ‘0’);
element3.options[1] = new Option(‘Apple’, ‘2’);
element3.options[2] = new Option(‘Guava’, ‘3’);
element3.options[3] = new Option(‘Mango’, ‘1’);
cell3.appendChild(element3);
$(‘#tblXml’).show(“fast”)
}
function DeleteRow() {
if (document.getElementById(‘tblXml’).rows.length > 2) {
$(‘#tblXml’).hide(“fast”)
document.getElementById(‘tblXml’).deleteRow((document.getElementById(‘tblXml’).rows.length – 1))
$(‘#tblXml’).show(“fast”)
}
}
function validate() {
var tbl = $(‘#tblXml’)
tbl.find(‘tbody tr:not(:has(th))’).each(function (index, row) {
if ($(row).find(‘input[name$=”Name”]’).val().trim() == ”) {
//alert(“Enter Name !!”);
$(row).find(‘input[name$=”Name”]’).css({ ‘border’: ‘1px solid red’ });
count += parseInt(count + 1);
return false;
}
if ($(row).find(‘input[name$=”Mobile”]’).val().trim() == ”) {
//alert(“Enter Mobile !!”);
$(row).find(‘input[name$=”Mobile”]’).css({ ‘border’: ‘1px solid red’ });
count += parseInt(count + 1);
return false;
}
if ($(row).find(‘select :selected’).val() == 0) {
alert($(row).find(‘select :selected’));
$(this).parent().css({ ‘border’: ‘1px solid red’ });
count += parseInt(count + 1);
return false;
}
});
if (parseInt(count) > 0) {
return false;
}
else {
SaveDetails();
}
}