JSFiddle - React, Tailwind, and code Playground

by Kris Tyte

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<table style="width:100%" border="1">
  <tr>
    <th>Date</th>
    <th>Points</th> 
  </tr>
  <tr>
    <td><input type="date" name="date1" value="2016-09-02" required="required"></td>
    <td><input type="number" name="points1" required="required"></td>
  </tr>
  <tr>
    <td><input type="date" name="date2" required="required"></td>
    <td><input type="number" name="points2" value="679" required="required"></td>
  </tr>
  <tr>
    <td><input type="date" name="date3" value="2016-09-02" required="required"></td>
    <td><input type="number" name="points3" value="679" required="required"></td>
  </tr>
  <tr>
    <td><input type="date" name="date4" required="required"></td>
    <td><input type="number" name="points4" required="required"></td>
  </tr>
</table>

JavaScript

$(document).ready(function() {

  $("table tr td").delegate("input", "blur", (function() {
  
  	var n = $("table tr td input:invalid").length;
    if (n == 0) {
    	alert(n);
    }
	  
	}));
});