JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>

<form id="commentForm" name="form1" method="post" action="">
<p>field 1: <input class="required" type="text" /></p>
<p>field 2: <input type="text" /></p>
<p>field 3: <input type="text" /></p>
<p>field 4: <input type="text" /></p>
<p>field 5: <input type="text" /></p>
<p>field 6: <input type="text" /></p>
<p>field 7: <input type="text" /></p>
<p>field 8: <input type="text" /></p>
<p>field 9: <input type="text" /></p>
<p>field 10: <input type="text" /></p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>

CSS

p {
  padding:10px;
  margin:25px;
  background:#eee;
}

input.error {border:solid 2px red;}
span.error {color:red;}

JavaScript

$("#commentForm").validate({
    focusInvalid: false,
    invalidHandler: function(form, validator) {
        
        if (!validator.numberOfInvalids())
            return;
        
        $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top - 20
        }, 200);
        
    }
});