JSFiddle - React, Tailwind, and code Playground

by Adem GENC

HTML

<form name="myForm" action="" method="POST">

<table border="1">
	<tr>
		<th>Block</th>
		<th>Floor</th>
		<th>T.Flats</th>
		<th>T.Subscribers</th>
		<th>Shaft</th>
		<th>Panel Floors</th>
		<th>Cables</th>
		<th>Fiber Optic</th>
	</tr>
	<tr>
		<td>A<input type="hidden" name="blocks[]" id="blocks_1" data-info="A" value="1"></td>
		<td><input type=text name="floor[1]" id="floor_1" size="5"></td>
		<td><input type=text name="total_number_of_flats[1]" size="5" id="total_number_of_flats_1"></td>
		<td><input type=text name="number_of_subscribers[1]" size="5" id="number_of_subscribers_1"></td>
		<td>
			<select size="1" name="shaft[1]" id="shaft_1">
			<option value="1">1 Shaft</option>
			<option value="2">2 Shafts</option>
			</select>
		</td>
		<td><input type=text name="panel_floors[1]" size="5" id="panel_floors_1"></td>
		<td><input type=text name="number_of_cables[1]" size="5" id="number_of_cables_1"></td>
		<td>
			<select size="1" name="fiber_optic[1]" id="fiber_optic_1">
			<option value="1">1 Point</option>
			<option value="2">2 Points</option>
			<option value="3">3 Points</option>
			<option value="4">4 Points</option>
			<option value="5">5 Points</option>
			<option value="6">6 Points</option>
			<option value="7">7 Points</option>
			<option value="8">8 Points</option>
			<option value="9">9 Points</option>
			<option value="10">10 Points</option>
			</select>
		</td>
	</tr>
	<tr>
	    <td>B<input type="hidden" name="blocks[]" id="blocks_2" data-info="B" value="2"></td>
	    <td><input type=text name="floor[2]" id="floor_2" size="5"></td>
	    <td><input type=text name="total_number_of_flats[2]" size="5" id="total_number_of_flats_2"></td>
	    <td><input type=text name="number_of_subscribers[2]" size="5" id="number_of_subscribers_2"></td>
	    <td>
	        <select size="1" name="shaft[2]" id="shaft_2">
	            <option value="1">1 Shaft</option>
	            <option value="2">2 Shafts</option>
	        </select>
	    </td>
	    <td><input...

JavaScript

var error="";
function formConrol(){

var blocks          = $("input[name^='blocks']").map(function(){return $(this).val();}).get();
var blocks_arr      = blocks.join(",").split(',');

$('form').each(function(){
    $(this).submit(function(e){

    $.each(blocks_arr, function(key, value) { 
      var floor = $("#floor_" + value).val();
      var total_number_of_flats = $("#total_number_of_flats_" + value).val();
      var number_of_subscribers = $("#number_of_subscribers_" + value).val();
      var panel_floors = $("#panel_floors_" + value).val();
      var number_of_cables = $("#number_of_cables_" + value).val();
      
      var info = $("#blocks_" + value).data('info');
      
    if(floor == "") {
    	$("#floor_" + value).css('border', 'solid 2px red');
      error+= "Enter how many floors the " + info + " block has\n" ; 
    }else{
    	$("#floor_" + value).css('border', '');
    }
     if(total_number_of_flats == "") {
     $("#total_number_of_flats_" + value).css('border', 'solid 2px red');
      error+= "Enter the total number of flats of block " + info + "\n" ;
    }else{
    	$("#total_number_of_flats_" + value).css('border', '');
    }
    if(number_of_subscribers == "") {
    $("#number_of_subscribers_" + value).css('border', 'solid 2px red');
      error+= "Enter the total number of subscribers of block " + info + "\n" ;
    }else{
    	$("#number_of_subscribers_" + value).css('border', '');
    }
    if(panel_floors == "") {
    $("#panel_floors_" + value).css('border', 'solid 2px red');
      error+= "Enter the floors of the " + info + " block where the cable panels are located by separating them with a comma.\n" ; 
    }else{
    	$("#panel_floors_" + value).css('border', '');
    }
    if(number_of_cables == "") {
    $("#number_of_cables_" + value).css('border', 'solid 2px red');
      error+= "Enter the cable counts on the boards of the " + info + " block by separating them with commas.\n" ; 
    }else{
    	$("#number_of_cables_" +...