JSFiddle - React, Tailwind, and code Playground

by jhonjairoroa87

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<div id="main">
		<!-- statically generated form -->
		<!-- <form id="staticForm" style="display:none;"> -->
		<form id="staticForm">
			<label>First name:</label><input type="text" name="firstname"required><br>
			<label>Last name:</label><input type="text" name="lastname" required><br>
			<label>Email:</label><input type="email" name="email" required>
			
		</form>

	</div>	
</html>

CSS

input:required:invalid, input:focus:invalid {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC');
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
  }
  input:required:valid {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=');
    background-position: right top;
    background-repeat: no-repeat;
  }

JavaScript

function ServiceField(myLabel, myName, myDataType){
		// public attributes
		this.label = myLabel;
		this.name = myName;
		this.dataType = myDataType;	
	}

	function Form(myServiceFieldsArray){
		this.serviceFieldsArray = myServiceFieldsArray;
		this.draw = function(parentDivId){
			var myFormId = "dinamicForm";
			$('#'+parentDivId).append('<form id="'+myFormId+'"></form>');

			for(index in this.serviceFieldsArray){
				console.log(index);
				var myServiceField = this.serviceFieldsArray[index];
				$('#'+myFormId).append('<label>'+myServiceField.label+'</label><input type="'+myServiceField.dataType+'" name="'+myServiceField.name+'" required><br>');				
			}
			
		}
	}

	var myServiveField1 = new ServiceField("First Name: ", 'firstname', "text");
	var myServiveField2 = new ServiceField("Last Name: ", 'lastname' ,  "text");
	var myServiveField3 = new ServiceField("Email: ", 'email' ,  "email");	
	var myServiveField4 = new ServiceField("Email2: ", 'email2' ,  "email");	

	var myServiveFieldsArray = new Array();
	myServiveFieldsArray.push(myServiveField1);
	myServiveFieldsArray.push(myServiveField2);
	myServiveFieldsArray.push(myServiveField3);	
	myServiveFieldsArray.push(myServiveField4);	
	

	var myForm = new Form(myServiveFieldsArray);
	myForm.draw("main");