input textbox,dropdown box,array validation using getElementsByName method | Learning Curve- Perfect Tutorial for the beginers

You can use the below to files,

form.html

<!DOCTYPE html>
<html>
<head>
<title>Simple Validations:mydoubts.in</title>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>

<table id="mytable" border="1" style="border-top: 1px solid Gainsboro;width:53%;  border-bottom:1px solid Gainsboro;border-left:1px solid Gainsboro; border-right:1px solid Gainsboro;">
<tr>
                      <p>
<td width="1%"><input type="checkbox" required="required" name="chk[]"  id="chk[]" /></td>
<td width="8%">
<label>Country</label>
<select name="country[]" id="[]">
<option value="select">Please Select</option>
 <option value="1">Africa</option>
 <option value="2">America</option>
 <option value="3">Australia</option>
 <option value="4">China</option>
 <option value="5">England</option>
 <option value="6">Japan</option>
 <option value="7">India</option>
 <option value="8">Indonesia</option>
 
</select>
</td>
<td width="7%">
<label >Population Percentage</label>
<input type="text" name="population[]" id="population[]">
    </td>
 
</p>
                    </tr>
                      <p>
<td width="1%"><input type="checkbox" required="required" name="chk[]"  id="chk[]" /></td>
<td width="8%">
<label>Country</label>
<select name="country[]" id="[]">
<option value="select">Please Select</option>	
<option value="1">Africa</option>
 <option value="2">America</option>
 <option value="3">Australia</option>
 <option value="4">China</option>
 <option value="5">England</option>
 <option value="6">Japan</option>
 <option value="7">India</option>
 <option value="8">Indonesia</option>
</select>
</td>
<td width="7%">
<label >Population Percentage</label>
<input type="text" name="population[]" id="population[]">
    </td>
 
</p>
                    </tr>

</table>


 <input type="button" name="save"  id="save" value="Save" Onclick="checkvalidaion();">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple Validations:mydoubts.in</title>

</head>

<body>

<tr>

<p>

<label>Country</label>

<option value="select">Please Select</option>

<option value="1">Africa</option>

<option value="2">America</option>

<option value="3">Australia</option>

<option value="4">China</option>

<option value="5">England</option>

<option value="6">Japan</option>

<option value="7">India</option>

<option value="8">Indonesia</option>

</select>

</td>

<label >Population Percentage</label>

</td>

</p>

</tr>

<p>

<label>Country</label>

<option value="select">Please Select</option>

<option value="1">Africa</option>

<option value="2">America</option>

<option value="3">Australia</option>

<option value="4">China</option>

<option value="5">England</option>

<option value="6">Japan</option>

<option value="7">India</option>

<option value="8">Indonesia</option>

</select>

</td>

<label >Population Percentage</label>

</td>

</p>

</tr>

</table>

</body>

</html>

validate.js

	function checkvalidaion()
{	
var table = document.getElementById('mytable');
var rowCount = table.rows.length; 
var chks = document.getElementsByName('chk[]');
var country=document.getElementsByName("country[]");
var population = document.getElementsByName('population[]');
//validations
var testnumbers = /^(10|[0-9])$/;
for(var j=0; j<rowCount; j++) {
 
if (chks[j].checked==false)
{
alert("please select rows using checkbox");
chks[j].focus();
return false;
}
if(country[j].value=='select')
{
alert("please select the country");
country[j].focus();
return false;
}
if(population[j].value=='')
{
alert("please Enter the populations");
population[j].focus();
return false;
}
 if (!testnumbers.test(population[j].value)) {
 	alert("please Enter Numeric value between0-10");
population[j].focus();
return false;
}
 
 
//validating the same skill levels
 
for(var k=j+1; k<rowCount; k++)
{
// alert(country[j].value);alert(country[k].value);
if((country[j].value)==(country[k].value)&& (country[j].value !='select') && (country[k].value !='select'))
{
     alert("There is no permission to add same country two times ");
country[k].focus();
return false;
}
}
}
}

function checkvalidaion()

{

var table = document.getElementById('mytable');

var rowCount = table.rows.length;

var chks = document.getElementsByName('chk[]');

var country=document.getElementsByName("country[]");

var population = document.getElementsByName('population[]');

//validations

var testnumbers = /^(10|[0-9])$/;

for(var j=0; j<rowCount; j++) {

if (chks[j].checked==false)

{

alert("please select rows using checkbox");

chks[j].focus();

return false;

}

if(country[j].value=='select')

{

alert("please select the country");

country[j].focus();

return false;

}

if(population[j].value=='')

{

alert("please Enter the populations");

population[j].focus();

return false;

}

if (!testnumbers.test(population[j].value)) {

alert("please Enter Numeric value between0-10");

population[j].focus();

return false;

}

//validating the same skill levels

for(var k=j+1; k<rowCount; k++)

{

// alert(country[j].value);alert(country[k].value);

if((country[j].value)==(country[k].value)&& (country[j].value !='select') && (country[k].value !='select'))

{

alert("There is no permission to add same country two times ");

country[k].focus();

return false;

}