Validation of Inputs

by Rajesh Dixit

HTML

<div id="content"></div>
<button onclick="validateInputs()">Validate</button>

CSS

.row{
  width:90%;
  padding:5px;
  margin:5px;
}

.error{
  color:red;
}

JavaScript

function getRowHTML(id){
	var HTML = 	"<div class='row'>" + 
  						"<input type='text' name='input_252[]' id='"+id+"' />"+
              "<p class='error'></p>" + 
              "</div>";
              
  return HTML;
}

function createHTML(){
	var _html = "";
	for(var i=0; i<5;){
  	_html += getRowHTML("txt" + i++);
  }
  
  document.getElementById("content").innerHTML = _html;
}

function validateInputs(){
	var regex = /^[a-z]+$/gi;
  
  var inputs = document.getElementsByName("input_252[]");
  Array.prototype.forEach.call(inputs, function(txt){
  	var lblErr = txt.nextSibling;
    console.log(lblErr);
  	if(!regex.test(txt.value)){
    	lblErr.innerText = "Invalid Value";
    }
    else{
    	lblErr.innerText = "";
    }
  });
}

(function(){
	createHTML();
})()